java读取服务器的图片名称,vue根据获取的文件名显示文件服务器上的图片

最近在使用vue+elementUI的时候碰到一个需求，将某个表中每条记录对应的图片显示在表格中：

场景： 1.表格中的图片字段存储的是图片名称

2.图片存储在另一个项目工程的资源文件夹中，so，通过路径直接访问是访问不到的。

3.两个项目工程共用一个数据库。so ,可以直接获取到图片名称

4.图片是通过另一个工程维护的基础数据。

思路：

1.搭建一个文件服务器，通过定时任务，在另一个工程目录中，将文件定时写到服务器文件夹目录下。

2.前端vue获取图片名称，拼接文件服务器地址来访问显示图片。

3.图片是基础数据，变动次数比较小，即使考虑文件写入与访问的先后顺序，这种思路也是可以实现的。

3.出于时间考虑，尽可能的简单实现，相对FTP来说，tomcat的文件服务器不需要考虑用户密码的配置。

4.需要注意一点：tomcat文件服务器并不是很稳定，这里只能选择性忽视了。

代码：这里重点是介绍下VUE下访问显示图片的写法，文件服务器的搭建，以及定时任务的编写就不赘述了。

需要动态的拼接图片地址所以

标签 使用：src

{{item.seqNo}}

{{item.location}}

{{item.questionDesc}}

{{item.questionCategary}}

定义了一个默认对象代表服务器文件夹地址

data() {

return {

imgServeUrl:'http://10.50.198.110:11201/fileServe/'

};

},

在方法中获取图片名称并拼接src:this.qcdefTop3Data[i].img

getImgData(this.paramTmp).then(response => {

this.qcdefTop3Data = response.data.rows;

var rowsLenth2 = response.data.rows.length;

if(rowsLenth2 < 3 ){

...

}else{

for(var i = 0 ; i< rowsLenth2;i++){

this.qcdefTop3Data[i].img = this.imgServeUrl+this.qcdefTop3Data[i].img;

}

}

});