Vue3 :style backgroundImage not working with require

Question

I'm trying to migrate a Vue 2 project to Vue 3. In Vue 2 I used v-bind style as follow:

<div :style="{backgroundImage: 'url('+require('/assets/imgs/'+ project.img)+')'}"></div>

In Vue 3 this doesn't work... I tried also:

:style="{ backgroundImage: `url(${require('@/assets/imgs/' + project.img)})` }"

Still not working.

It seems like require doesn't work for Vue 3, that's why I tried without it, but then I see the background-image url path in the Inspector, but the image is not there.

Can somebody help with that? Thanks!

Answer 1

You definitely don't need to use require

<div :style="{ backgroundImage: `url('/src/assets/${project.img}')` }"></div>