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>

效果圖：