vue中使用for循环生成img但是src 无效的问题 解决 require

1. 使用情况一:直接把src的值写在img中

代码样式

<ul>
    <li >
        <img :src="./src/img/1.jpg" alt="">
        //按照你图片存放的路径
    </li>
</ul>

这样写完全没有问题 他会找到图片并进行显示

2. 使用情况二:把vue中data的src的值写在img中

<ul>
    <li v-for="(item,index) in newListCon" :key="index">
      <div class="item-img">
        <img :src="imgSrc" alt="">
      </div>
    </li>
</ul>

//
<script>
export default {
  name: 'SuccessCase',
  data() {
    return {
      imgSrc:"./src/img/1.jpg"
    }
  },
}
</script>

这种就有问题了 他的图片不会显示了???
表现形式就是
1.在网页上 你打开控制台 查看img标签的src 发现是./src/img/1.jpg
路径没问题啊 怎么不显示呢
解决:
把路径 用require包裹起来

imgSrc:require("./src/img/1.jpg"),

这样图片就可以显示了