v-binding an image from an object to an img src not working

Question

I'm trying to bind an object's URL dinamically to my component, but it is not working. It only works if I use require and if I link it directly, as following: "v-bind:imagem="/home/thalys/Documentos/Dev/CodeX/santuarioec/src/imgs/anuncio.png"", or if I put the relative path, like '../imgs/anuncio.png' or '@/imgs/anuncio.png'.

<template> <div> <site-template> <div class="anuncio"> <anuncio v-for="anuncio in anuncios" v-bind:key="anuncio.id" v-bind:imagem="anuncio.imagem"> </anuncio> </div> </site-template> </div> </template> <script> import SiteTemplate from '@/templates/SiteTemplate' import Anuncio from '@/components/anuncio/Anuncio' export default { name: 'Home', components: { SiteTemplate, Anuncio }, data () { return { anuncios: [ { "id": 1, "imagem": "/home/thalys/Documentos/Dev/CodeX/santuarioec/src/imgs/anuncio.png" }, { "id": 2, "imagem": "/home/thalys/Documentos/Dev/CodeX/santuarioec/src/imgs/anuncio.png" }, { "id": 3, "imagem": "/home/thalys/Documentos/Dev/CodeX/santuarioec/src/imgs/anuncio.png" }, { "id": 4, "imagem": "/home/thalys/Documentos/Dev/CodeX/santuarioec/src/imgs/anuncio.png" }, { "id": 5, "imagem": "/home/thalys/Documentos/Dev/CodeX/santuarioec/src/imgs/anuncio.png" } ] } } } </script>

And here is my component "Anuncio"

<template> <div class="anuncio"> <div class="w3"> <img class="img" v-bind:src="imagem"/> </div> </div> </template> <script> export default { name: 'Anuncio', props: ['titulo', 'imagem'], data () { return { } } } </script>

I moved my "imgs" folder to assets, just like the guy down here told me. Then I tried to do as you told me, but it didnt worked either. — Thalys Menezes
– Thalys Menezes, Commented Feb 26, 2019 at 21:45

Subhan Asadli · Accepted Answer · 2019-02-26 21:48:52Z

So here is the solution:

In your Anuncio component you have to hardcode the path to your images into the require() method. So your img HTML-Tag would look like follwing:

<img class="img" v-bind:src="require(`../imgs/${imagem}`)"/>

In the Array which contains the pathes with the names of the images you should just provide the names and the .png. It would look like this:

anuncios: [ { "id": 1, "imagem": "anuncio.png" }, { "id": 2, "imagem": "anuncio.png" }, { "id": 3, "imagem": "anuncio.png" }, { "id": 4, "imagem": "anuncio.png" }, { "id": 5, "imagem": "anuncio.png" } ]

Try it out.

Thanks duude, thank you so much! I only needed to make some changes on the solution you gave. I left my "Anuncio" component with only <img class="img" v-bind:src="imagem" /> and did what you said in my home page: <anuncio v-for="anuncio in anuncios" v-bind:key="anuncio.id" v-bind:titulo="anuncio.id" v-bind:imagem="require(../assets/imgs/${anuncio.imagem})">

Frank · Accepted Answer · 2019-02-26 19:47:06Z

There should be an assets folder in your /src directory if you've initiated your project with vue-cli (https://cli.vuejs.org/).

Move your imgs folder into the assets folder. Rewrite your image path to @/assets/imgs/anuncio.png (no require() required).

I did as you told me, but it still doesnt work. Any other solution?

Collectives™ on Stack Overflow

v-binding an image from an object to an img src not working

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related