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
	    },
   ],

總結： 這樣就實現了循環遍歷的時候加載不同的圖片。