html - html 'download' 属性打开一个新页面而不是下载

Question

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

<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>

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

顺便说一句，我使用谷歌浏览器作为浏览器。

标签： htmldownloadanchorimagedownload

Answer 1

根据caniuse报告：

Chrome 65 及以上版本仅支持同源下载链接。
火狐只支持同源下载链接

同源意味着如果您使用自己的计算机进行开发并使用，则必须将图像或其他内容实际下载到本地计算机<a href="./pic/[Pic_Name].[Pic_Ext]" class="btn btn-outline-success btn-sm" target="_blank" download>Download</a>

如果您使用 localhost 进行开发，只需省略 . /图片之前。对于远程服务器也是如此。

此外，如果您使用的是过时版本的浏览器，则下载属性永远不会起作用。检查caniuse.com了解更多...