Question

我正在尝试生成由src生成的每个li项目的v-for链接。

我有一些字符串的列表... ["Electronics","Furniture", "Cloths", "Sports", "Entertainment", "Others"]，并且在每个标签中

我想通过动态更改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>

Answer 1

在数据属性中

我认为您应该使用名称和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>

修改模板

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

动态更改图片VUE中的“ src”

1 个答案: