Binding images with v-html

Question

I have an array with some object and each object has an image tag, so i want to show this images but i dont know how i think the mistake is in the src of image.. Its my code in file in folder components its Template :

<div v-for="(item, index) in items" :key="index">
 <div v-html="item.image"></div>
</div>

And its script

data(){
 return {
  items: [
    {title : 'IMG1', image : '<img src="../assets/img1.jpg" alt="None">',},
    {title : 'IMG2', image : '<img src="../assets/img2.jpg" alt="None">',}
  ]
 }
}

But its just show None.. please how can i get this images?! its my folder directory im in file posts.vue and i wanna get images in assets/images

dont place html in the model, instead just the file path/name `image : 'img1.jpg'`, it will make it much simpler — Lawrence Cherone, Jul 27 '20 at 15:28
That's gave me error, Module not found: Error can't resolve '../assets' — Rawand, Jul 27 '20 at 15:59
do a sanity check where the folder is located (or show us your directory structure with a tree cmd or a screen), its not ../assets relative to the build path/component or http request. — Lawrence Cherone, Jul 27 '20 at 16:28
A while back, I had same issue, prob not a dupe but may be of some interest: https://stackoverflow.com/questions/51963030/parcel-js-vue-dynamic-images-src/58712521#58712521 — Lawrence Cherone, Jul 27 '20 at 16:30
Please check here https://stackoverflow.com/questions/40491506/vue-js-dynamic-images-not-working — Mansur, Jul 27 '20 at 20:26

score 0 · Answer 1 · answered Jul 28 '20 at 23:55

0

have you tried using an image tag? Like <img :src="item.image" alt="none" />. and have your image in data as just a string like "../assets/img1.jpg".

answered Jul 28 '20 at 23:55

Korbin Williams

11
2

Binding images with v-html

1 Answers1