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

Question

I've gotten this IPFS info such as "/ipfs://QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE" as API response.

I want to display this file(image) on my page, but I can't find out the correct solution.

How can I get the image URL from this info in react app?

Please help with my concern.

Go here: https://github.com/ipfs/js-ipfs/tree/master/examples/browser-create-react-app — , Jul 13 '21 at 07:02
@ihorbond It was moved here: https://github.com/ipfs-examples/js-ipfs-examples/tree/master/examples/browser-create-react-app — , May 08 '22 at 12:14

score 34 · Accepted Answer · edited Jan 19 '22 at 14:21

34

Try adding https://ipfs.io in the beginning of your ipfs info as suggested in this document https://docs.ipfs.io/concepts/what-is-ipfs/

i.e

ipfs://QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE

becomes

https://ipfs.io/ipfs/QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE

edited Jan 19 '22 at 14:21

Morse

695
8
8

answered Jul 13 '21 at 09:27

Akshay Mathur

421
4
6

8

It's worth being clear that this means to prepend the `https://ipfs.io` to the result from the API without the protocol, like so: `https://ipfs.io/ipfs/QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE` – Shane Hudson Jul 13 '21 at 12:46
Thanks for your answer. By the way, if I should use `IPFS HTTP gateway URL`s, how can I do? Is there the best way to use `IPFS HTTP gateway`? – cocoa Jul 14 '21 at 00:35
504 bad gateway – Lonyui Feb 04 '22 at 05:35

Discordian · Answer 2 · 2022-11-22T18:37:12.310

If you're using js-ipfs, you can retrieve the image over IPFS, and display it:

/** 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
 * @param {number} limit size limit of image in bytes
 * @returns ObjectURL
 */
async function loadImgURL(cid, mime, limit) {
    if (cid == "" || cid == null || cid == undefined) {
        return;
    }
    const content = [];
    for await (const chunk of ipfs.cat(cid, {length:limit})) {
        content.push(chunk);
    }
    return URL.createObjectURL(new Blob(content, {type: mime}));
}

Then you can display it with something like:

<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>

The big advantage of this is you're using the IPFS network itself, and not relying on a public HTTP gateway (the recommended way).

score 7 · Answer 3 · answered Mar 20 '22 at 01:24

7

You can do something like that:

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

answered Mar 20 '22 at 01:24

Márcio

171
2
8

score 1 · Answer 4 · answered Feb 25 '22 at 01:45

One thing to note here about fetching images from IPFS that I think isn't being discussed sufficiently in these answers is that you will need to either

Run your own node of IPFS, or
Get a hosted IPFS node through a service like Infura

I have spent a little bit of time working through this in the last couple of days, and it will always come back to you having to have direct access to your own node.

There are "Gateways," which are nodes hosted by the community, and you can read more about them in the IPFS docs here: https://docs.ipfs.io/concepts/ipfs-gateway/#limitations-and-potential-workarounds

The thing with the gateways is that they are not meant to be relied upon for production sites, as you can see below. It's possible that there is some hosted node out there that somebody is giving out for free, but I doubt it, and you wouldn't want to rely on that anyways.

I think that other questions above have elaborated how you actually process the responses once you get it, but I wanted to cover this extra ground in my answer.

ipfs docs

Vansh Patpatia · Answer 5 · 2022-07-31T20:20:09.427

-1

let imgUrl = url?.slice(url.indexOf(":"),url?.lastIndexOf("/"));
let slice = url?.slice(url.lastIndexOf("/"),url?.length)
let renderURL = `https${imgUrl}.ipfs.dweb.link${slice}`;
console.log(renderURL);

edited Jul 31 '22 at 20:20

answered Jul 31 '22 at 20:19

Vansh Patpatia

1
2

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

5 Answers5