vue+SpringBoot图片预览

vue代码

      <ul>
        <li  v-for ="(item,index) in images" 
        :key="index" class="clear" 
        style="list-style-type:none;float: left;margin-left: 20px">
          <img
            style="width: 100px; height: 100px"
            :src=item.imagePath
          />
          <p style="text-align: center;">
	         <a herf="#" @click="downloadF(item.id,item.name)" 
	         	style="font-size: 10px;width: 100px;color:blue;">{{item.name}}
	         </a>
          </p>
        </li>
      </ul>

//初始化要预览的图片信息
getImagesList(){
  var length = this.uploadList.length;
  for (var i=0 ; i<length ; i++){
      var item = this.uploadList[i];
      var id = item.fileId;
      var name = item.fileName;
      var saveName = item.fileNameSaved;
      var path = item.filePath;

      var index = saveName.indexOf('.');
      var imageName = saveName.substring(0,index);
      var suffix = saveName.substring(index,saveName.length);
      var imagePath;
      if (suffix == ".txt"){imagePath = require('@/assets/fileUpload/txt.png')}
      else if (suffix == ".doc" || suffix == ".docx"){imagePath = require('@/assets/fileUpload/word.png');}
      else if (suffix == ".xlsx" || suffix == ".xls"){imagePath = require('@/assets/fileUpload/excel.png');}
      else if (suffix == ".jpg" || suffix == ".png" || suffix == ".jpeg"){
        try {
            //第一种、直接通过相对路径访问
            //imagePath = require("../../../../../eos/"+newPath+imageName+suffix);
            imagePath = process.env.VUE_APP_BASE_API+'/'+path+'/'+saveName;
        }catch (e) {
            imagePath = require('@/assets/fileUpload/error.png');
        }
      }else {imagePath = require('@/assets/fileUpload/file.png');}
      var image = {id,name,path,imagePath};
      this.images.push(image);
  }
}

数据库对应字段