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;
                    } 
                }
            });