在反应中单击图像时下载图像

Question

我有一个从 Unsplash API 获取图像的简单应用。我希望用户点击图片并下载它，也可能让图片在新标签页中打开。 urls.regular 只是一个简单的 url，例如 https://images.unsplash.com/photo-1543332164-6e82f355badc?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE3OTUzOH0

在阅读了有关 stackoverflow 的其他问题后，我在我的 a 标签末尾添加了“下载”。

<div>
  <a href={urls.regular} title={description} download>
     <img
      src={urls.regular}
     />                   
  </a>
</div>

我还在我的 a 标签中尝试了以下内容：

                    href={urls.regular}
                    target="_blank"
                    rel="noopener noreferrer"
                    download={urls.regular}

Answer 1

您应该为a 标签定义onclick 事件。

<a href={urls.regular} title={description} download onclick="onClick(urls.regular)">

function onClick(url) {
    window.open(url, '_blank');
}