遍历的数组 如何添加图片 vue

要在Vue中添加图片，可以使用Vue的`<img>`标签，将图片的路径绑定到`src`属性上。在遍历的数组中，可以为每个元素添加一个图片路径属性，然后在模板中使用`v-for`循环遍历数组，将每个元素的图片路径绑定到`<img>`标签的`src`属性上，就可以在页面中显示图片了。例如：

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <img :src="item.imgUrl" alt="图片">
      <p>{{ item.name }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          id: 1,
          name: '商品1',
          imgUrl: 'image1.jpg'
        },
        {
          id: 2,
          name: '商品2',
          imgUrl: 'image2.jpg'
        },
        {
          id: 3,
          name: '商品3',
          imgUrl: 'image3.jpg'
        }
      ]
    }
  }
}
</script>

在上面的例子中，`items`数组中的每个元素都包含一个`imgUrl`属性，用于存储图片的路径。在模板中，使用`v-for`循环遍历数组，将每个元素的`imgUrl`属性绑定到`<img>`标签的`src`属性上，就可以在页面中显示对应的图片了。