html“下载”属性会打开一个新页面，而不是下载

问题描述

我正在尝试使用以下代码为图像下载按钮：

<a href="https://media.npr.org/assets/img/2017/09/14/gettyimages-10141026_slide-67be9fc1bca330b26debade87690b5e84286614d-s800-c85.jpg" class="btn btn-outline-success btn-sm" target="_blank" download>Download</a>

但是，单击该按钮时，它将重定向到带有图像的页面，而不是下载图像。我正在寻找此问题here的解决方案。答案说，这可能是因为我使用的是跨域URL，要解决此问题，我需要将图像托管在与父站点相同的域上。但是我不知道答案是什么意思。有人可以帮我解决这个问题吗？感谢您的帮助！

顺便说一句，我使用的是Google Chrome浏览器。

解决方法

根据犬报告：

Chrome 65及更高版本仅支持同源下载链接。
Firefox仅支持同源下载链接

同源性表示，如果要使用自己的计算机进行开发并使用<a href="./pic/[Pic_Name].[Pic_Ext]" class="btn btn-outline-success btn-sm" target="_blank" download>Download</a>

，则必须将映像或任何内容实际下载到本地计算机。

如果您使用localhost进行开发，则只需省略。 / pic之前。远程服务器也一样。

此外，如果您使用的浏览器版本过旧，那么download属性将永远无法使用。检查caniuse.com了解更多...