vue cli 3 – use background image in style tag
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:
-
As Max Martynov, highlighted in the comments, you should use
url('~@/assets/image.svg').Webpack has some specific rules when resolving assets[1].
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 torequire('some-module/image.svg').References
- https://vuejs-templates.github.io/webpack/static.html#asset-resolving-rules
讨论(0) -
I would recommend using style binding. I found this thread really helpful link.
Here an example using bootstrap cards
<div class="card-image" :style="{ backgroundImage: 'url(' + require('@/assets/images/cards.jpg') + ')' }">The image is in src/assets/images/cards.jpg
讨论(0)
加载中...
- 热议问题