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.

Answer 1

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