window.location.protocol使用实战图片不同浏览器显示问题解决方案

图片在不同浏览器可能会显示不出来个别原因分析， 如火狐浏览器协议类型会有问题 但是谷歌可以
解决方案：将写死的协议 如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必须的部分