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

【问题标题】：html 'download' attribute opens up a new page instead of downloadinghtml 'download' 属性打开一个新页面而不是下载
【发布时间】：2020-12-04 21:22:45
【问题描述】：

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

&lt;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&gt;Download&lt;/a&gt;

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

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

【问题讨论】：

将图像保存到您的文件夹中，然后使用新的文件位置进行下载。
感谢您的回复。我已将代码更改如下：下载但是，它仍然不起作用。 =(
不要认为你需要下载="3Bunnies.jpg" 只需下载。另外，我认为您不需要 . /pic 前面。
我已经改了。下载还是不行。顺便说一句，我正在使用谷歌浏览器。
使用 /pic/3Bunnies.jpg

标签： html download anchor imagedownload

【解决方案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...

【讨论】：