Vue CLI - 在静态文件中包含资产文件夹中的图像

Posted 2023-02-22

【中文标题】Vue CLI - 在静态文件中包含资产文件夹中的图像

【英文标题】：Vue CLI - include image from assets folder in static file

【发布时间】：2019-01-03 00:51:35

【问题描述】：

是否可以将assets/ foder 中的某个静态.scss 文件中的图像作为background-image 包含在内？

我有一个_buttons.scss 部分按钮，一些按钮有一个图标，我想将其添加为background-image。图标位于src/assets/ foder。

应用结构：

- src
  - assets
    some_icon.svg
  - components
  - scss
    _buttons.scss
    main.scss
  - views
  App.vue
  main.js
  router.js

在_buttons.scss:

.some-selector 
    background-image: url(../assets/some_icon.svg)

    /* also tried
    background-image: url(./assets/some_icon.svg)
    background-image: url(/assets/some_icon.svg)
    background-image: url(assets/some_icon.svg)
    */

这会返回带有This relative module was not found 的错误。

我知道我可以在我的组件或主 App.vue 中简单地添加这些样式（范围或不范围），但是，我想知道如果没有它是否可以实现？

我也知道我可以将这些图标添加到我的 public 文件夹中，但我希望这些图标保留在 assets/ 文件夹中。

$ vue -V
$ 3.0.0-rc.5

也许是一些自定义的 webpack 配置？

谢谢

【问题讨论】：

我认为这个答案解决了你的问题Resolving background-image URLs in CSS files for Webpack

您如何使用main.scss 文件？我将它导入到 main.js 文件中，并且相对导入对我有用。

@LuisOrduz 我的App.vue 文件中有@import 'main.scss'。在 main.js 中导入 .scss 文件是一个好习惯吗？

@Vucko 从App.vue 导入main.scss 完全没问题。除非我尝试background-image 不存在的 URL，否则我无法重现该错误。另请注意../assets/some_icon.svg 是正确的。您有要查看的仓库吗？

@tony19 刚刚尝试了您的建议，它确实有效。不知道您可以在main.js 中导入.scss 文件。您能否解释一下为什么它可以作为答案，我会接受。

【参考方案1】：

您可以通过以下方式进行管理：

background-image: url('~@/assets/some_icon.svg');

这里的关键是使用~@ 作为前缀。以 ~ 为前缀的 URL 被视为模块请求。如果你想利用 Webpack 的模块解析配置，你需要使用这个前缀。例如，如果你有一个 src 文件夹的解析别名等于 @，如果你使用 vue-cli3，你可以使用这种类型的 URL 来强制 Webpack 解析到 assets 文件夹中所需的资产。更多信息在这里： handling static assets