vue v-for遍历本地图片 require用法

业务场景：写一个类似轮播图但是是展开的图片展览并排显示自动播放

图片：

本来这种情况都是从接口中请求  不同页面同样功能但是数据是不一样的

但是我这个项目用到的是本地图片    

刚开始我试着用../../方法调用图片  直接用的话显示是没问题的  但是配合v-for渲染使用的话会造成图片显示错误

 之后我想到了require方法

将img数据修改为：

img:[
        {
          img:'1.png'
        },{
          img:'2.png'
        },{
          img:'板面.jpeg'
        },{
          img:'球馆.jpg'
        }
      ]

将../../的路径删除

img标签修改为：

<li v-for="item in img" style="float: left;overflow: visible;">
       <img :src="require('../../assets/'+item.img)" alt="" style="width: 200px; height:160px;">
</li>

之前是:src=“item.img” 之后是:src=“require(’../../assets/’+item.img)”
由此我们知道之前的本地需要遍历的数据里面少的../../assets/这个片段是加在了这里。
使用了require将被拆开的图片地址再次拼接起来。这样就可以遍历展示本地图片了

注意事项

这里我们在拆分图片路径地址时，应该注意一边的固定不变的，一边是动态的。比如这里的../../assets/就是不变的，后面的地址会动态变动，因此提出../../assets/放在require里面。