Vue CLI - 在静态文件中包含资产文件夹中的图像 [英] Vue CLI - include image from assets folder in static file

问题描述

是否可以在某些静态 .scss 文件中包含 assets/ 文件夹中的图像作为 background-image>?

Is it possible to include an image, which is in assets/ foder, in some static .scss file, as a background-image?

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

I have a _buttons.scss partial and some buttons have an icon, which I'd like to add as a background-image. The icons are located in 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)
    */
}

返回一个错误，找不到这个相关模块.

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

I know I can simply add those styles (scoped or not) in my component, or in main App.vue, however, I was wondering if this can be achieved without that?

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

I know also that I can add those icons in my public folder but I would like for the icons to remain in the assets/ folder.

$ vue -V
$ 3.0.0-rc.5

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

Maybe some custom webpack config?

谢谢

推荐答案

您可以通过以下方式管理:

You can manage that by :

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

这里的关键是使用 ~@ 作为前缀.以 ~ 为前缀的 URL 被视为模块请求.如果您想利用 Webpack 的模块解析配置，则需要使用此前缀.例如，如果 src 文件夹的解析别名等于 @，如果您使用 vue-cli3，您会这样做，您可以使用这种类型的 URL 强制 Webpack 解析到所需的资源中资产文件夹.更多信息在这里:处理静态资产

Key here is using ~@ as a prefix. URLs prefixed with ~ are treated as a module request. You need to use this prefix if you want to leverage Webpack's module resolving configurations. For example if you have a resolve alias for src folder equal to @, which you do if you use vue-cli3, you can use this type of URL to force Webpack to resolve to the needed asset in the assets folder. More info here: handling static assets

这篇关于Vue CLI - 在静态文件中包含资产文件夹中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！