踩坑：后端返回的图片资源无法下载

2020.12.25

问题：

今天遇到一个问题，后端返回给我了一个网址，我把这个网址直接扔到浏览器上后就可以下载图片，但是我把这个网址赋值给我的a标签的href属性的时候，a标签无法下载该图片，显示下载失败。

解决方法：

在网址前面加双斜线

     <template slot-scope="scope">
         <a download :href="'//' +scope.row.authorizationLetter">
        	 <el-button type="text">下载</el-button>
         </a>
	 </template>

原理：

对于同时支持HTTPS和HTTP的资源，引用的时候要把引用资源的URL里的协议头去掉，例如：//image.studyofnet.com/upfileImages/20161008/20161008222856974.gif，这样相当于相对路径，即浏览器会自动根据当前是HTTPS还是HTTP来给资源URL补上协议头的，可以达到无缝切换。