html5下载属性在反应中不起作用[重复]

Question

下载不是下载图像，而是重定向到另一个页面。我在新的 chrome、edge 和我的手机中也试过这个，但这不起作用，它只是重定向到另一个页面。我正在使用来自 unsplash.com 的链接。

当用户点击下载图标时，必须下载图片，如何实现？

这是我的代码，

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;

Answer 1

您可以简单地给出带有扩展名的图像链接。像这样的：

//Download as image.png

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