v-for遍历图片路径的问题

问题描述：

今天在开发中遇到一个百思不得其解的问题，我在使用遍历一个图片环境数组的时候，发现图片无法加载。

问题如下：

<div v-for="(item, index) in recommendImgList" :key="index">
  <div style="width: 100%; height: 80%;">
     <img style="width: 100%; height: 100%;" :src="item">
  </div>
</div>

data () {
  return {
    recommendImgList: [
      "../../../../images/soulFind/city.jpg",
      "../../../../images/soulFind/low.jpg"
    ]
  }
}

现在的问题就导致这个图片无法显示。

解决方法：

在List中的图片路径上添加require()。

data () {
  return {
    recommendImgList: [
      require(`../../../../images/soulFind/city.jpg`),
      require(`../../../../images/soulFind/low.jpg`)
    ]
  }
}

原因：

由于在Vue.js中对资源的引用都是动态的，但是图片是静态资源，所以就需要使用require()来处理图片路径，使其正确地将图片等静态资源包含到项目的构建中。使静态路径使用变为v-for的动态使用。