[Vuejs]-Vue CLI adding inline css background image, path is wrong

0👍

There’s a reason why that doesn’t work.

@ is an alias that webpack interprets. It will do that for imported files and the <style> blocks, but when you have it as a string in template, it will not handle it. It may also not move the images from assets into dist folder.

Unfortunately, you will most likely need to find another way to do this. If you can expand on your desired outcome, you may find a suggestion that fits best.

For example, you could have them images already in your dist/assets, and then use relative path in style like: /assets/drive.jpg.

If you know the list of images you’ll be using, you can add them using require('./assets/drive.jpg') in the component, or even inline. But because this work is done at compile time, you won’t be able to use require(imageUrl).

Leave a comment