Vue CLI - include image from assets folder in static file

webpack vue.js vuejs2 vue-cli

11,393

You can manage that by :

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

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

11,393

Vucko

just an ordinary web dev

Updated on July 16, 2022

Comments

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

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.

App structure:
```
- src
  - assets
    some_icon.svg
  - components
  - scss
    _buttons.scss
    main.scss
  - views
  App.vue
  main.js
  router.js
```
And in _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)
    */
}
```
Which returns an error with This relative module was not found.

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?

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
```
Maybe some custom webpack config?

Thanks
- Max Sinev almost 6 years
  
  I think this answer solves your problem Resolving background-image URLs in CSS files for Webpack
- Luis Orduz over 5 years
  
  How are you using the main.scss file? I'm importing it in the main.js file and that relative import works for me.
- Vucko over 5 years
  
  @LuisOrduz I have @import 'main.scss' in my App.vue file. Is that a good practice to import the .scss file in the main.js?
- tony19 over 5 years
  
  @Vucko It's perfectly fine to import main.scss from App.vue. And I can't reproduce the error unless I try a nonexistent URL for background-image. Also note that ../assets/some_icon.svg is correct. Do you have a repo to look at?
- Vucko over 5 years
  
  @tony19 just tried what you've suggested and it really works. Didn't know that you can import in main.js the .scss files. Can you please explain a little bit why it works as an answer and I'll accept it.
- tony19 over 5 years
  
  I'm glad it works for you, but I didn't really suggest anything. I merely stated I tried your code exactly as you described, and I couldn't reproduce the problem :) You can import main.scss from either main.js or App.vue, but I personally prefer importing CSS from *.vue files and only app setup code in main.js.
- Dat Tran over 5 years
  
  Does it work with background-image: url(/assets/some_icon.svg)? It works on my site with trailing slash path like that. Because the level of the component is not the same the level of the css files. when you import the scss, the relative path will be the relative path in the component, not in the scss file.
- Saeed over 5 years
  
  try using ~/assets/some_icon.svg