Html “动态变化”；src"；在图像VUE中

我正在尝试生成

src

链接，链接到由

v-for

生成的每个

li

项目

我有一些字符串的列表<代码>[“电子”、“家具”、“衣服”、“运动”、“娱乐”、“其他”]在每个标签

中，我想生成一些动态变化的

src

例如：
第一项是电子产品，因此路径将是

@/assets/electronics.png

，并显示图像 第二项是家具，所以路径应该是

@/assets/Furniture.png

我需要做什么来显示

img

我需要如何定义这个路径

<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" />
      <a href="#"><h3>{{item}}</h3></a>
   </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>

导出默认值{
名称：'标题'，
道具：{}，
数据（）{
返回{
物品：[“电子产品”、“家具”、“布料”、“运动”、“娱乐”、“其他”]
}
},
方法：{
getPicture（项目）{
返回“@/assets/”+项+”.png”
}
}
}
数据属性中的

我认为您应该使用name和src创建对象数组，然后导入每个图像

<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>

从“@/path/to/img/electronic”导入electronicSrc；
从“@/path/to/img/furniture”导入家具src；
导出默认值{
名称：'标题'，
道具：{}，
数据（）{
返回{
物品=[{类别：“电子产品”，src:electronicing}，{类别：“家具”，src:furnitureImg}，{类别：“布料”，src:clothImg}，…]；
}
}, 
}

修改模板

<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" />
  <a href="#"><h3>{{ item.category }}</h3></a>

---

您需要使用

require

。类似于

returnrequire（'@/assets/'+item+'.png'）

。另外，不要使用方法呈现模板的某些部分。试试

：src=“require（`@/assets/${item}.png`）”

是的，@Phil right，谢谢！