el-image圖檔放大功能

 當背景傳回的資料隻有圖檔路徑時，我們是不能直接用 <img :src="item.img"> 因為找不到img這個圖檔的名稱，這個時候就要自己進行轉化（讓背景返給你 [{pie:"圖檔1" ，img:"http://tu.png"}] 這種格式也行）

背景能返給你隻有路徑的他就是不想麻煩再返給你那種格式，是以 還是自己動手豐衣足食

// 在 methods 
imgName(path) {
　　console.log(path); //列印這個path是每張圖檔的路徑
   let filename;
   if (path.indexOf("/") > 0) {
    //如果包含有"/"号 從最後一個"/"号+1的位置開始截取字元串
     filename = path.substring(path.lastIndexOf("/") + 1, path.length);
   } else {
      filename = path;
   }
   return filename; // 要return傳回這個filename
},      

getDetailList() {
   封裝的函數名().then(res => {
     console.log(res.data); // 這是背景傳回的，隻有圖檔路徑
     this.img = res.data
     res.data.map(el => { // 周遊循環後 let一個變量名obj
       let obj = {
          pie: this.imgName(el), // pie 是截取的圖檔最後一個/的名字
          img: el // img 圖檔路徑
       };
       console.log(obj); 
       this.photosImg.push(obj);
      });
   });
}      

列印的obj就是這種的

 接下來就可以直接寫到代碼裡

<template>
  <div>
    <div v-for="(item, index) in photosImg" :key="index" class="box">
      <div class="photos_box">
        <!-- <img :src="item.img" class="photos_image" /> -->
        <el-image
          class="photos_image"
          :src="item.img"
          :preview-src-list="img"
        >
        </el-image>
      </div>
    </div>
  </div>
</template>


data() {
  return {
    photosImg: [],
    img:''
  };
},

<style lang="scss" scoped>
.box {
  float: left;
  .photos_box {
    width: 160px;
    height: 160px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    margin-right: 48px;
    margin-bottom: 20px;
    .photos_image {
      width: 135.4px;
      height: 135.4px;
      margin-left: 12px;
      margin-top: 12px;
    }
  }
}
</style>      

效果圖：