vue cli 3 – use background image in style tag

Solution 1:

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 to require('some-module/image.svg').

References

1. https://vuejs-templates.github.io/webpack/static.html#asset-resolving-rules

Solution 2:

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