0

The download is not downloading the images, instead it just redirects to another page. I tried this in new chrome, edge and in my mobile also but this not working, it is just redirecting to another page. I am using the links from the unsplash.com.

When the user clicks on the download icon, the image must be downloaded, how to achieve this?

Here is my code,

import React from "react";

const CardImage = ({ img, name, id }) => {
  return (
    <figure className="cardImg">
      <img src={img} alt="" />
      <span className="name">{name}</span>
      <div className="overlay"></div>
      <div className="cardImg__buttons">
        <a href={img} className="download" download target="_blank">
          <i className="fas fa-download"></i>
        </a>
        <a href="#" className="delete">
          <i className="fas fa-trash"></i>
        </a>
      </div>
    </figure>
  );
};

export default CardImage;
Sumukha Kb
  • 7
  • 4

1 Answers1

-1

You can simply give the link of image with extension. Something like this:

//Download as image.png

 <a download="image.png" target="_blank" href="http://example.org/assets/avatar.png">
          <i className="fas fa-download"></i>
 </a>
Musadiq Khan
  • 174
  • 7