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

Question

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

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

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

请帮忙解决我的问题

Answer 1

尝试添加 https://ipfs.io in the beginning of your ipfs info as suggested in this document https://docs.ipfs.io/concepts/what-is-ipfs/

即

ipfs://QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE

变成

https://ipfs.io/ipfs/QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE

Answer 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 网络本身，而不依赖于 public HTTP 网关（推荐方式）。

Answer 3

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

运行你自己的IPFS节点，或者
通过像 Infura 这样的服务获取托管的 IPFS 节点

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

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

网关的问题在于，生产站点并不依赖它们，如下所示。可能有人免费提供一些托管节点，但我对此表示怀疑，无论如何你都不想依赖它。

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

ipfs docs

Answer 4

你可以这样做：

tokenURI.replace("ipfs://", "https://ipfs.io/ipfs/");

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

How can I get the image url from IPFS info in React.js?

javascript

api

node.js

reactjs

ipfs