Unable to download an image in HTML

Question

I am using notepad for coding html. I was writing a code to download an image of a flower. I have done everything correctly. I used tag 'a' and also used the attributes href and download. But it is only opening the link not downloading it. here is the source code and output i am getting.

<!DOCTYPE HTML>

<html>

<title>first website</title>

<body text = 'white', bgcolor = 'orange'>

    <h2 align = 'center'>
  <!--here i am using tag a to open the wikipedia page of flowers when clicked on the image-->
    <a href = 'https://en.wikipedia.org/wiki/Flower' target = _blank><img src = 'https://www.gardeningknowhow.com/wp-content/uploads/2021/07/sulfur-cosmos-mexican-aster-flowers.jpg' height = 20% width = 10% alt = "Not found"></a><br><br><br>

<!--here i am using it for downloading the image when clicked on the link-->       
<a href = 'https://www.gardeningknowhow.com/wp-content/uploads/2021/07/sulfur-cosmos-mexican-aster-flowers.jpg' download>click here </a>to download the image above

If you click in that flower image wikipedia page of flowers will appear. And if you click that link, the above image of flower will download. That is what I intended to do. It is opening the wikipedia page when clicked on the image, But it is not downloading when clicked on the link. instead it is showing like this.

It is not downloading. Instead it is just showing like this. could anyone tell me what is the problem here and how to solve it.

you have already seen here? https://stackoverflow.com/questions/2408146/href-image-link-download-on-click — Luca P., Mar 23 '22 at 11:19

score 0 · Answer 1 · answered Mar 23 '22 at 11:22

0

The image should be same origin. if its on different origin the download link may not work as it work as a navigating link rather then a downloading link. it is because some browsers dont work cross download image.

answered Mar 23 '22 at 11:22

Muhammad Danish

11
2

I copied this image address from chrome. It is from same origin – NAVANEETH J NAIR Mar 23 '22 at 11:28
Same origin means ../files/image.jpg – Muhammad Danish Mar 23 '22 at 11:35
What? I did not understood. Are you saying both the images should be jpg – NAVANEETH J NAIR Mar 23 '22 at 11:37
Actually I said that all images you have to download should be your own origin like in your case the image files should be in local folder not a URL from google as chrome and some other browsers does not supported cross origin downloads like you are using link to download it will always redirect you to the link. – Muhammad Danish Mar 23 '22 at 12:00
Ok. I understood. Thanks – NAVANEETH J NAIR Mar 23 '22 at 12:26

Unable to download an image in HTML

1 Answers1