vue2.x 循环img src遍历加载不同图片的方法

vue2.x 循环img src遍历加载不同图片的方法

第一种，vue.js直接引入网页的模式

html

 	 <main class="tabThird">
        <section class="showFelx">
          <div v-for="(item,index) in items" :key="index" class="itemsShow">
            <img :src="item.img" alt="" />
            <span>{{ item.title }}</span>
            <span :class="item.classColor" class="colorShow"></span>
          </div>
        </section>
      </main>

js

		data() {
          return {
            // todo: this.tableData.length,
            items: [
              { img: "./images/line.png", title: "在线状态", classColor: "isA" },
              { img: "./images/work.png", title: "工作状态", classColor: "isB" },
              { img: "./images/lock.png", title: "锁机状态", classColor: "isC" }
            ],
            	}
           }

第二种方法，脚手架的使用

temp

	<div v-for="item in temps" :key="item.id">
     <div class="contract-item">
       <img :src="item.imgUrl">
     </div>
    </div>

引入图片，注意路径

import con1 from "@/assets/img/con01.png";
import con2 from "@/assets/img/con02.png";
import con3 from "@/assets/img/con03.png";

进行图片的加载位置：

	temps: [
	    {
	     imgUrl: con1
	    },
	    {
	     imgUrl: con2
	    },
	    {
	     imgUrl: con3
	    },
   ],

总结： 这样就实现了循环遍历的时候加载不同的图片。