如何将图像地址放在数组中并在源 VUE JS 中使用该数组索引？

Question

我是 vue js 的新手，我遇到了一个小问题。我确定这是一个小问题，因为我是新手，无法自己解决。任何建议或解决方案都将被确认。

事情是我想将图像地址（将在资产目录中的图像）存储在一个数组中，然后我想将这些地址作为源传递给 img 标签。例如以下是代码：

   <div class="text-h2" v-for="img in imgs" :key="img"> 
                           <img src="{{img}}" alt="">
     </div>

图像源将保存在 src 数组中的位置：

export default {
    name: 'Home',
   data: () => ({
      imgs: ['./assets/img1.png','./assts/img2.png' ],
    }),

任何提示都将不胜感激

Answer 1

您可以创建方法：

methods() {
  getImage(imagePath) {
    return require(imagePath);
  }
}

然后在模板中调用该方法：

<img :src="getImage(img)" alt="">

使用 :src 可以将图像源绑定到数组 imgs 中的 img。

How to place image address in array and use that array index in source VUE JS?