Question 221529 in Html Question posted in
Some basic documentation can be found here.

Html – Download images with one click

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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search