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

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

获取服务器上图片的位置,怎么获取服务器上的图片地址
怎么获取服务器上的图片地址内容精选换一换通过云服务器或者外部镜像文件创建私有镜像时,如果云服务器或镜像文件所在虚拟机的网络配置是静态IP地址时,您需要修改网卡属性为DHCP,以使私有镜像发放的新 ...
如何显示服务器上的图片,显示服务器上的图片怎么写
显示服务器上的图片怎么写内容精选换一换内容审核服务输入图片参数"Image"是图片的base64编码,本节介绍利用谷歌浏览器进行图片格式转换,获取图片的base64编码信息. ...
用户显示图片的服务器是什么,显示服务器上的图片怎么写
显示服务器上的图片怎么写内容精选换一换在IntelliJ上选择"项目",找到".idea"文件夹,单击右键选择"新建>文件", ...
下载微信服务器上的图片到自己的服务器
下载微信服务器上的图片到自己的服务器微信上传图片后单张图片将返回serverId 多张图片将返回serverId数组,后续只需遍历下载即可下载微信服务器上的图片工具类 ... import j ...
java获取服务器上的图片进行拼接
1.从服务器下载图片保存到本地 package com.example.demo.util;import java.io.File; import java.io.FileOutputStream; ...
解决： Vue 项目本地运行 run 与服务器上 build 样式不一致，build 后样式不生效
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. PS:本人遇到这个问题是用文中最后一句话解决:" 在组件的样式中记得添加 'scoped' ...
vue通过链接显示服务器上的图片_图片网站该如何做SEO优化？详细讲解图片优化技巧...
通常,在网站搜索引擎优化的过程中,很多站长和SEOer经常忽略图片的优化,但事实上,每个网站都有很多图片,所以优化网站图片就像优化其他内容一样,成为搜索引擎优化的一个重要工作内容. 如果你能成功地优化 ...
php获取服务器上的图片不显示,php 读取服务器图片
php 读取服务器图片内容精选换一换本文介绍如何将开源框架的网络模型,例如Caffe.TensorFlow等框架训练好的模型,通过OMG(Offline Model Generator:离线模型 ...
java通过J2C获取用户名密码_WAS服务器上的J2C别名有什么用途？
这是我LdapTemplate类公共LdapTemplate getLdapTemplete(字符串ldapID) {WAS服务器上的J2C别名有什么用途? if (ldapID.equalsIgn ...
服务器上有图片但是app不显示不出来,网络app图片显示不出来的
网络app图片显示不出来的内容精选换一换接入CDN加速后,用户访问网站或者APP资源依然很慢.域名是否接入CDN加速是否命中CDN缓存是否跨运营商和跨省缓存规则设置是否合理加速资源是否预热是否客 ...

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

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

最新文章

热门文章