vue中图片v-for循环加载

      这几天一直在写移动端，由于刚刚接触移动端，并不知道用哪个库好用，从vant换到mint-ui，其中也换了几个不知名的ui库，后来多方比较还是推荐大家用vant。。。       在写页面让图片加载循环的时候，用v-for，让src的路径循环，想的很简单

<li v-for="(item,index) in list" :key="index">
          <img class="index-img" :src="item.load">
          <button>{{item.name}}</button>
 </li>

 list: [
                {load:'../../assets/img/4.jpg',name:"卧室"},
                {load:'../../assets/img/6.jpg',name:"书房"},
                {load:'../../assets/img/3.jpg',name:"钠灯"},
                {load:'../../assets/img/2.jpg',name:"会议室"},
                {load:'../../assets/img/3.jpg',name:"LED灯"}
              ]

      想的很简单，结果出来是错的

后台

如果我们正常加载图片时

<li><img src="../../assets/img/4.jpg"></li>

后台

所以比较得知，在用v-for的时候无法进行解析，用关键字require的话，它是一个表达式，可以进行赋值操作。

 list: [
                {load:require('../../assets/img/4.jpg'),name:"卧室"},
                {load:require('../../assets/img/6.jpg'),name:"书房"},
                {load:require('../../assets/img/3.jpg'),name:"钠灯"},
                {load:require('../../assets/img/2.jpg'),name:"会议室"},
                {load:require('../../assets/img/3.jpg'),name:"LED灯"}
              ]

图片就出来啦

就这样结束了，求轻喷！！！