Dynamic changing of "src" in image VUE [duplicate] - html

Question

This question already has answers here:
How to import and use image in a Vue single file component?
(10 answers)
Closed 2 years ago.
I am trying to generate src link to each of my li items generated by v-for.
I have list of some Strings... ["Electronics","Furniture", "Cloths", "Sports", "Entertainment", "Others"] and in each tag I want to generate some with dynamically changing src.
For example:
First item is electronics so path would be #/assets/Electronics.png and image would be displayed
Second item is Furniture so path would be #/assets/Furniture.png
What do I need to do to show that img how do I need to define this path?
<ul class="menu-dropdown">
<li v-for="item in items" :key="item" class="center align-self-center">
<img class="float-left" :src="getPicture(item)" v-bind:alt="item" />
<h3>{{item}}</h3>
</li>
</ul>
<script>
export default {
name: 'Header',
props:{},
data() {
return {
items: ["Electronics", "Furniture", "Cloths", "Sports", "Entertainment", "Others"]
}
},
methods:{
getPicture(item){
return '#/assets/' + item + ".png"
}
}
}
</script>

Answer 1

In the data property
I think you should make array of object with name and src, then import every images.
<script>
import electronicSrc from "#/path/to/img/electronic";
import furnitureSrc from "#/path/to/img/furniture";
export default {
name: 'Header',
props:{},
data() {
return {
items = [{ category: "Electronics", src: electronicImg}, { category: "Furniture", src: furnitureImg}, { category: "Cloths", src: clothImg}, .. ];
}
},
}
</script>
Modify the template
<li v-for="item in items" :key="item" class="center align-self-center">
<img class="float-left" :src="item.src" v-bind:alt="item.category" />
<h3>{{ item.category }}</h3>