html 'download' attribute opens up a new page instead of downloading

Question

I'm trying to make a download button for an image using the following code:

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

However, when the button is clicked, it redirects to a page with the image on it instead of downloading the image. I've searched for solution for this problem here. The answer said that it's probably because I'm using a cross-domain URL, and to fix this I need to host the image on the same domain as the parent site. But I don't know what the answer means. Can someone help me fix this problem? Appreciate your help!

By the way, I'm using Google Chrome as the browser.

Save the image into your folders and then use the new file location to download from. — Arundeep Chohan, Aug 15 '20 at 03:05
Thanks for your reply. I've changed my code as the following: Download However, it still doesn't work. =( — Ckwu, Aug 15 '20 at 03:32
Don't think you need download="3Bunnies.jpg" just download. Also I don't think you need the . infront of /pic . — Arundeep Chohan, Aug 15 '20 at 03:35
I've changed it. Download Still doesn't work. I'm using Google Chrome by the way. — Ckwu, Aug 15 '20 at 03:38

score 3 · Accepted Answer · edited Aug 15 '20 at 06:00

According to caniuse report:

Chrome 65 and above only supports same-origin download links.
Firefox only supports same-origin download links

The same-origin means that you have to actually download the image or whatever to your local computer if you're developing with your own computer and use <a href="./pic/[Pic_Name].[Pic_Ext]" class="btn btn-outline-success btn-sm" target="_blank" download>Download</a>

And if you are developing with localhost, just omit the . before the /pic. Same for a remote server.

Also, if you're using an outdated version of the browser, the download attribute never works. Check caniuse.com for more...

html 'download' attribute opens up a new page instead of downloading

1 Answers1