Javascript 如何使用ReactJs创建一个从API获取图像并下载到本地的按钮

我需要一个按钮，下载图像到本地。但这些图像来自Unsplash API

我发现了一个HTML

点击图片下载：

但是，如果我想在React中使用此方法，它将不起作用。原因是我想下载的图片来自Unsplash API，因此无法工作！但是，如果我试图下载一个属于我的项目目录的本地映像，它就成功了

从“/style.module.css”导入样式；
从“类名”中导入cn；
从“反应图标/bi”导入{BiDownArrowAlt，BiPlus}；
从“../../assets/images/logo.png”导入徽标；
常量ImageCard=（{image}）=>{
返回(
{/*{下载按钮}*/}
);
};

这是工作，但我的照片来自API

我在StackOverflow中搜索这个主题，找到了。但这种方法并不奏效。下载图像但图像不工作的

从“/style.module.css”导入样式；
从“类名”中导入cn；
从“反应图标/bi”导入{BiDownArrowAlt，BiPlus}；
常数下载=（e）=>{
console.log（e.target.href）；
获取（e.target.href{
方法：“获取”，
标题：{}，
})
。然后（（响应）=>{
response.arrayBuffer（）.then（函数（缓冲区）{
constURL=window.url.createObjectURL（新Blob（[buffer]）；
const link=document.createElement（“a”）；
link.href=url；
link.setAttribute（“下载”、“image.png”）；//或任何其他扩展名
document.body.appendChild（链接）；
link.click（）；
});
})
.catch（（错误）=>{
控制台日志（err）；
});
};
常量ImageCard=（{image}）=>{
返回(
{/*{下载按钮}*/}
);
};
导出默认图像卡；

---

我怎样才能解决那个问题请帮助我

我认为这个

image.links.download

可能缺少图像URL的主机域部分

考虑将主机域预先添加到它，使其看起来有点像这样

href={`IMAGE\u HOST\u DOMAIN/${IMAGE.links.download}

由于映像来自Unsplash API，因此它很可能是Unsplash主机域

编辑：

重构下载函数，使其如下所示：

const下载=异步（e）=>{
试一试{
const blob=wait fetch（e.target.href）。然后（res=>res.blob（））
constURL=window.url.createObjectURL（blob）；
const link=document.createElement（“a”）；
link.href=url；
link.download=“image.png”；//或任何其他扩展
document.body.appendChild（链接）；
link.click（）；
document.body.removeChild（link）；
}抓住{
console.error（'无法下载映像…'）
}
};

然后像这样在

a

标记中单击

onClick

，将其激发

<a
 href={image.urls.raw}
 download
 onClick={download}
>

---

这里有一个香草javascript解决方案

const IMG\u URL=”https://media.gettyimages.com/photos/closeup-network-space-picture-id1013942164?s=612x612";
函数toDataURL（url）{
返回获取（url）。然后（（响应）=>{
返回response.blob（）；
}).然后（blob=>{
返回window.URL.createObjectURL（blob）；
});
}
异步函数下载（）{
常量a=document.createElement（“a”）；
a、 href=wait todata URL（IMG_URL）；
a、 下载=“myImage.png”；
文件.正文.附件（a）；
a、 单击（）；
文件.body.removeChild（a）；
}
const link=document.querySelector（“#link”）；
link.addEventListener（'click'，（）=>{
下载（）
})

---

是的，你是对的，我更改了

图像。链接。下载
到这个
图像。URL.raw
它提供了一个伪装者图像URL，但注意下载图像点的变化如果你这样做，那么你就不再需要你拥有的下载功能了。因此，删除
onClick={（e）=>download（e）}
我只是删除了代码顶部的部分并下载了函数，但仍然不起作用当你点击下载链接时会发生什么？只需转到新的选项卡并打开上面的图像就可以了谢谢我的朋友