图片在不同浏览器可能会显示不出来个别原因分析, 如火狐浏览器协议类型会有问题 但是谷歌可以
解决方案:将写死的协议 如http换成window.location.protocol就可以了
前景:前台项目和后台项目有时返回的并不是图片全路径 ,有时候返回的是图片的id
需要拼接协议(http或https)+域名部分+端口部分+文件名部分(并不代表全部的组成部分)
这时候项目里会在main.js里定义好公共部分 如:
//VUE_APP_BASE_API = '/dev-api' .env.环境的文件里配置的
//main.js内容
const eLink =
window.location.host + process.env.VUE_APP_BASE_API + "/eipe/download/";
Vue.prototype.imgMapLink ="http://" + eLink;
// 如果这里写死http可能造成有些浏览器图片显示问题
this.imgMapLink + row.picUrl
正确写法
//VUE_APP_BASE_API = '/dev-api' .env.环境的文件里配置的
const eLink =
window.location.host + process.env.VUE_APP_BASE_API + "/eipe/download/";
Vue.prototype.imgMapLink = window.location.protocol + "//" + eLink;
//main.js内容
this.imgMapLink + row.picUrl
//使用的时候
//相当于就是一个下载请求 不过可能返回的 是个流文件也可能是一个可读的文件比如.jpg的图片
window.location.protocol可以获取当前页面协议这样不同环境也不会影响图片显示 特别是开发环境多数是http的
流文件放到浏览器请求回来是乱码
文件或者压缩包请求回来是可读取的文件
下面介绍下普通URL的各部分组成:
http://www.epec.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name
从上面的URL可以看出,一个完整的URL包括以下几部分:
1.协议部分
该URL的协议部分为“http:”,这代表网页使用的是HTTP协议。在Internet中可以使用多种协议,如HTTP,FTP等等本例中使用的是HTTP协议。在"HTTP"后面的“//”为分隔符
2.域名部分
该URL的域名部分为“www.epec.com”。一个URL中,也可以使用IP地址作为域名使用
3.端口部分
跟在域名后面的是端口,域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分,如果省略端口部分,将采用默认端口
4.虚拟目录部分
从域名后的第一个“/”开始到最后一个“/”为止,是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是/news/
5.文件名部分
从域名后的最后一个“/”开始到“?”为止,是文件名部分,如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止,是文件部分,如果没有“?”和“#”,那么从域名后的最后一个“/”开始到结束,都是文件名部分。本例中的文件名是index.asp。文件名部分也不是一个URL必须的部分,如果省略该部分,则使用默认的文件名
6.参数部分
从“?”开始到“#”为止之间的部分为参数部分,又称搜索部分、查询部分。本例中的参数部分为boardID=5&ID=24618&page=1。参数可以允许有多个参数,参数与参数之间用“&”作为分隔符。
7.锚部分
从“#”开始到最后,都是锚部分。本例中的锚部分是name。锚部分也不是一个URL必须的部分