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

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

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

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

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

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

思路：

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

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

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

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

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

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

需要动态的拼接图片地址所以<img>标签 使用：src

                        <tbody id="vdbody2" :table-loading=tableLoading>
                            <tr v-for="(item,index) of qcdefTop3Data" :key="index" >
                              
                              <td style="width :8.24%;background-color: rgb(8, 151, 247);color : rgb(252, 252, 252);" class = "vdtd1">{{item.seqNo}}</td> 
                              <td class = "vdtd1" style="width : 25.3% ;background-color : rgb(8, 151, 247);color : rgb(252, 252, 252);">{{item.location}}</td>
                              <td class = "vdtd1" style="width : 16.66%;background-color   : rgb(8, 151, 247);color : rgb(252, 252, 252);">{{item.questionDesc}}</td>
                              <td class = "vdtd1" style="width : 20.53%;background-color   : rgb(8, 151, 247);color : rgb(252, 252, 252);">{{item.questionCategary}}</td>
                              <td class = "vdtd1" style="width : 29.07%;background-color   : rgb(8, 151, 247);color : rgb(252, 252, 252);"><img :src="item.img"></td>                              
                            </tr>
                        </tbody>

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

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