vue el-image 顯示圖片

一、前端圖片

<el-form-item label="案件檔案">
               <el-image fit="contain" v-for="(item,index) of fileList" :key="index" :src="item.url" :preview-src-list="getImgList(index)" style="width:100px;height:100px;" />
            </el-form-item>

二、方法

  // 查詢圖片列表資訊
    getFileList(id){
      let params = {
        page_index: 1,
        page_count: 100,
        relationId: id
      }
      getItemFile(params).then(res => {
        if (res.code == 200) {
          let result = JSON.parse(res.result)
          let data= result.object;
          this.fileList = result.object;
          let count = data.length;
          if (count > 0) {
            for(let i=0;i<data.length;i++){
              this.fileList[i].url = this.$publicjs.fileServer+data[i].filePath;
              this.srcList.push(this.$publicjs.fileServer+data[i].filePath);
            }
          } 
        } else {
          this.$publicjs.showMessage('檔案查詢失敗', this.$publicjs.ErrorType)
        }
      })
    },
    // 大圖預覽
    getImgList(index){
      let arr=[];
      let i =0;
      for(i;i<this.srcList.length;i++){
        arr.push(this.srcList[i+index]);
        if(i+index >= this.srcList.length-1){
          index = 0-(i+1);
        }
      }
      return arr;
    }

三、實現效果