VueJS Cannot find module backgroundImage

Question

I'm trying to display background image in a component.

If I understand it well, we must use that:

<div class="food-icon"
:title="tooltip"
:style="{backgroundImage: `url(${require(image)})`}">

But I get this error

Error in render: "Error: Cannot find module '../assets/fast-food.jpg'"

I try it with:

<div class="food-icon"
:title="tooltip"
:style="{backgroundImage: `url(${require('../assets/fast-food.jpg')})`}">

And that works well, i don't understand why.

Answer 1

In your first snippet you missed single quotes around image

Try:

url(${require('image')})

Just remember to whatever you wrap inside url(' ') must be quoted to be a valid string.