如何从 React.js 中的 IPFS 信息获取图像 url？答案

【问题标题】：How can I get the image url from IPFS info in React.js?如何从 React.js 中的 IPFS 信息获取图像 url？
【发布时间】：2021-09-22 05:41:25
【问题描述】：

我已收到此 IPFS 信息，例如“/ipfs://QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE”作为 API 响应。

我想在我的页面上显示这个文件（图像），但我找不到正确的解决方案。

如何在 React 应用中从该信息中获取图片 URL？

请帮助解决我的问题。

【问题讨论】：

转到这里：github.com/ipfs/js-ipfs/tree/master/examples/…

标签： javascript node.js reactjs api ipfs

【解决方案1】：

尝试按照本文https://docs.ipfs.io/concepts/what-is-ipfs/中的建议在您的ipfs信息开头添加https://ipfs.io

即

ipfs://QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE

变成

https://ipfs.io/ipfs/QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE

【讨论】：

值得明确的是，这意味着将 https://ipfs.io 添加到没有协议的 API 的结果中，如下所示：https://ipfs.io/ipfs/QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE
感谢您的回答。顺便说一句，如果我应该使用IPFS HTTP gateway URLs，我该怎么办？有没有最好的使用IPFS HTTP gateway的方法？
504 网关错误

【解决方案2】：

如果您使用的是 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 网关（推荐的方式）。

【讨论】：

【解决方案3】：

关于从 IPFS 获取图像，我认为在这些答案中没有得到充分讨论的一点是，您需要这样做

运行您自己的 IPFS 节点，或
通过 Infura 等服务获取托管 IPFS 节点

在过去的几天里，我花了一些时间来解决这个问题，但它总是会让你不得不直接访问你自己的节点。

有“网关”，它们是由社区托管的节点，您可以在此处的 IPFS 文档中阅读有关它们的更多信息：https://docs.ipfs.io/concepts/ipfs-gateway/#limitations-and-potential-workarounds

网关的问题是它们不应该被依赖于生产站点，如下所示。可能有一些托管节点有人免费赠送，但我对此表示怀疑，而且无论如何您都不想依赖它。

我认为上面的其他问题已经详细说明了您在收到回复后如何实际处理，但我想在我的回答中涵盖这个额外的基础。

ipfs docs

【讨论】：