如何解决如何从 React.js 中的 IPFS 信息获取图像 url？
我收到了此 IPFS 信息，例如“/ipfs://QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE”作为 API 响应。
我想在我的页面上显示这个文件（图片），但我找不到正确的解决方案。
如何从 React 应用中的此信息中获取图像 URL？
请帮助解决我的问题。
解决方法
尝试按照本文档中的建议在 ipfs 信息的开头添加 https://ipfs.io https://docs.ipfs.io/concepts/what-is-ipfs/
,如果您使用的是 js-ipfs，您可以通过 IPFS 检索图像，并显示它：
/** Uses `URL.createObjectURL` free returned ObjectURL with `URL.RevokeObjectURL` when done with it.
*
* @param {string} cid CID you want to retrieve
* @param {string} mime mimetype of image (optional,but useful)
* @param {number} limit size limit of image in bytes
* @returns ObjectURL
*/
async function loadImgURL(cid,mime,limit) {
if (cid == "" || cid == null || cid == undefined) {
return;
}
for await (const file of ipfs.get(cid)) {
if (file.size > limit) {
return;
}
const content = [];
if (file.content) {
for await(const chunk of file.content) {
content.push(chunk);
}
return URL.createObjectURL(new Blob(content,{type: mime}));
}
}
}
然后你可以用类似的东西来显示它：
<body>
<img id="myImage" />
<script>
async function setImage() {
// just an example,make sure to free the resulting ObjectURL when you're done with it
//
// if your CID doesn't work,try this one: Qmcm32sVsMYhURY3gqH7vSQ76492t5Rfxb3vsWCb35gVme
// that's a popular CID,which should resolve every time
document.getElementById("myImage").src = await loadImgURL("QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE","image/png",524288);
}
setImage();
</script>
</body>
这样做的最大优点是您使用的是 IPFS 网络本身，而不是依赖公共 HTTP 网关（推荐的方式）。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
