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