vue样式中背景图片路径_vue cli 3 –在样式标签中使用背景图片

I want to use a svg image from my assets folder in one of my components as a background-image. Here is an example of my component:

export default {

name: 'component'

}

.container {

height: 40px;

width: 40px;

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

}

But the image doesn't show. The Path is correct. Where is my mistake?

Thanks for your help.

解决方案

As Max Martynov, highlighted in the comments, you should use url('~@/assets/image.svg').

Webpack has some specific rules when resolving assets

In order to resolve an alias (@), as you are using, it is mandatory webpack handles the request as a module request. Using the prefix ~ enforces webpack to treat the request as a module request, similar to require('some-module/image.svg').

References