Download images with one click

Question

Why can't the images be downloaded with one click? What mistake did I make in my password? What could be wrong? Here is my code:

body {
  max-width: 1100px;
  width: 100%;
  margin: auto;
  background-color: darkslategray;
}

.top-div {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0;
  margin-bottom: 0;
  height: 100px;
  width: 100%;
  text-align: left;
  background-color: black;
}

.arrow-button {
  cursor: pointer;
}

.AvatarsHolder {
  margin-left: 50px;
  margin-right: 50px;
}

p {
  text-align: center;
}

.Avatar {
  border: 2px solid black;
  margin: 30px;
  width: 115px;
  height: 115px;
}

h2 {
  text-align: center;
  font-family: Tahoma;
}

<div class="top-div">
  <h1 style="color:white; font-family:Tahoma; text-align:left; padding-left:20px;">
    <a href="USER_PROFILE_AFTER_LOGIN.html" style="text-decoration: none; color:white;">AVATAR'S GALLERY</a></h1>
  <h1 style="text-align:center; font-family:Tahoma; color:white; padding-left:30px;"><br>Left click on the avatars you want to download them</h1>
  <div class="AvatarsHolder" style="background-color:white;"><br>
    <h2>Human's Avatars</h2>
    <hr>
    <p>
      <a href="Avatar0.png" download>
        <img src="https://picsum.photos/200/300" title="Bold" class="Avatar">
      </a>
      <a href="Avatar1.png" download>
        <img src="https://picsum.photos/200/300" title="Keyhole" class="Avatar">
      </a>
      <a href="Avatar2.png" download>
        <img src="https://picsum.photos/200/300" title="Hipster" class="Avatar">
      </a>
      <a href="Avatar3.png" download>
        <img src="https://picsum.photos/200/300" title="Rapper" class="Avatar">
      </a>
    </p>
  </div>
</div>

I'm trying to make the images download with one click, I want when the user left clicks on an image it will automatically download to their computer.

Is the path of the image correctly? If the images are in the same level that the HTML try `` — Lucas David Ferrero, Aug 02 '23 at 12:12
How are you testing this? There are some particular restrictions on downloading files depending on CORS. You need to have the downloadables on the same origin, and it _needs_ to be a valid origin (so not `file://`). I tested code similar to yours in `file://` and on a local server, and it worked on the latter but not the former. Here is an interesting post related to this (though not quite what you encounter) https://stackoverflow.com/questions/66575118/download-attribute-for-a-does-not-work-for-pdfs-and-images — somethinghere, Aug 02 '23 at 12:13
With the changes you made to your example, it will _not_ work as the origin of the images is _different_ from Stack Overflow (and probably your site as well) _and_ all the images lack a CORS header as far as I can see, so instead of downloading it will follow the link, allowing a download there. — somethinghere, Aug 02 '23 at 12:17
You probably need a little backend for this, the html download link could be outdated. I suggest javascript. — AJ Ande, Aug 02 '23 at 13:36
It all depends on the environment, which we don't know about. Are you running a local server? Are your images located on that server? Are you running this from the `file://` protocol? Etc... — somethinghere, Aug 02 '23 at 14:23

Tejas Nayak · Answer 1 · 2023-08-02T13:43:05.647

-1

Assign the image src attribute value to the anchor tag's href attribute and it's better if the url points to a file, i.e., it ends with .jpg or .png or.webp

Refer this: href image link download on click

edited Aug 02 '23 at 13:43

answered Aug 02 '23 at 12:40

Tejas Nayak

1
1

Why would it better if the URL points to a file ending with `.jpg`, `.png`, etc.? Furthermore OP's original snippet *did* contain URL's ending in an extension, but was edited to create a minimal example – DarkBee Aug 02 '23 at 12:57
File ending with .jpg or.png is better because it's directly recognised as an image file. It's optional if the image server is setting the content type as image/jpg or image/png. – Tejas Nayak Aug 02 '23 at 13:14
@DarkBee , we do not have access to the original snippet that you are speaking of. Where can I find it? – Tejas Nayak Aug 02 '23 at 13:16
Not really, the fact that a `jpg` is displayed immediately is because your browser is configured as such – DarkBee Aug 02 '23 at 13:20
You can click the link "Editted by"/"Eddited X hours ago" to see the revisions of a post - [link](https://stackoverflow.com/posts/76819712/revisions) – DarkBee Aug 02 '23 at 13:20
@DarkBee , thanks. Refer this: https://stackoverflow.com/questions/2408146/href-image-link-download-on-click – Tejas Nayak Aug 02 '23 at 13:41
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 07 '23 at 04:44

mohamed aboali · Answer 2 · 2023-08-02T12:46:37.470

-1

You need the images to be on the server you are using to be able to download.

Example the following Code will work on W3school editor but will not work in your Code:

Link to Try: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_download

Code:

<a href="/images/myw3schoolsimage.jpg" download>
 <img src="/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>
<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download>
  <img src="https://www.w3schools.com/images/myw3schoolsimage.jpg" title="Bold"         class="Avatar">
</a>

edited Aug 02 '23 at 12:46

answered Aug 02 '23 at 12:42

mohamed aboali

3
3

"*need the images to be on the server you are using to be able to download*" - Could you add a reference to support your claim? Also OP's images are on his/her own server as seen in the original snippet – DarkBee Aug 02 '23 at 13:01

Download images with one click

2 Answers2