v-for中图片加载的问题

v-for中图片加载的问题

今天在做图片轮播图时轮播图只有字，没有图，很是奇怪，于是去浏览器看了看HTML，发现图片路径如下：

<img data-v-0cdcbf12="" src="@/assets/img/glory/4.jpg" alt="">

一点都没有解析。

这是写的代码：

<el-col :span="6" v-for="(item,index) in carousel" :key="index">
   <div class="col" v-if="index<4">
       <div class="carousel-card">
            <img :src="item.img" alt />
       </div>
       <span>{{item.span}}</span>
       <div class="line"></div>
   </div>
</el-col>

data(){
	return{
		carousel:[
     	   {
      	    span:'中央国家机关先进基层党组织',
      	    img:'@/assets/img/glory/1.jpg'
     	   },
      	   {
      	    span:'全国科普教育基地',
      	    img:'@/assets/img/glory/2.jpg'
      	   }
        ]
	}
}

看上去没什么问题，然后去网上找了找，想起来React是用require的方式导入图片的。改进后的代码如下：

<el-col :span="6" v-for="(item,index) in carousel" :key="index">
     <div class="col" v-if="index<4">
          <div class="carousel-card">
              <img :src="require(`@/assets/img/glory/${(index+1)}.jpg`)" alt />
          </div>
          <span>{{item.span}}</span>
          <div class="line"></div>
  	  </div>
</el-col>

require直接嵌在行内，轻松搞定！