0

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.

5
  • Is the path of the image correctly? If the images are in the same level that the HTML try <a href="./Avatar1.png" download></a> Aug 2 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) stackoverflow.com/questions/66575118/… Aug 2 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. Aug 2 at 12:17
  • You probably need a little backend for this, the html download link could be outdated. I suggest javascript.
    – AJ Ande
    Aug 2 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... Aug 2 at 14:23

2 Answers 2

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

1
  • "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 2 at 13:01
-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

7
  • 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 2 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. Aug 2 at 13:14
  • @DarkBee , we do not have access to the original snippet that you are speaking of. Where can I find it? Aug 2 at 13:16
  • Not really, the fact that a jpg is displayed immediately is because your browser is configured as such
    – DarkBee
    Aug 2 at 13:20
  • You can click the link "Editted by"/"Eddited X hours ago" to see the revisions of a post - link
    – DarkBee
    Aug 2 at 13:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.