Nuxt.js: How to link img src to a rendered list

[tenjojeremy]

Im trying to render a list with an image where the name of the images come from an array of objects.

How do I properly link it?

Thank you in advance.

_{This question is available on Nuxt.js community (#c389)}

[ausir0726]

vue file will pre work with vue loader
when vue load seen you vue file that don't know what is '~assets/img/' + item.logo
because item.logo when compile is undefined .

so , if you want use a variable with you image , you need move your image to static folder
that will copy to dist . ( even you never used )

if item.logo = 'logo.png'
put the logo.png to static/img/logo.png
and in your vue file modify to
<img :src="`img/${item.logo}`"/>

that your logo should show on screen .

[alexchopin]

Hi @tenjojeremy,
Like @ausir0726 said for dynamic path, you can't use webpack assets, you need to use static assets and place your images in the static folder.

[tenjojeremy]

Thank you both for the solution, @ausir0726 @alexchopin

Cheers.

[ubershmekel]

Note for future googlers - another way to solve this is to use require. E.g.
const imageUrl = require('~/assets/img/yourimage.png')

Then dynamically using that url in js.

[dimitrieh]

for Googlers, I had success with:

:style="{ backgroundImage: 'url(' + require(@/assets/img/${page.image}) + ')' }"

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

[manniL]

For all people looking for the solution, I've written a blog post about that topic :relaxed: