How to display NFT image in react from metadata?

Moralis General
#1

I have the following data that I got from Moralis for an NFT. Now I want to display the image but I can’t seem to find how I can do that. I have the following data

  1. address : “0x8c714199d2ea08cc1f1f39a60f5cd02ad260a1e3”
  2. tokenId:“9990”
    3.tokenUri:“https://ipfs.moralis.io:2053/ipfs/QmNYfJMYagHws7gwN2Hw8USQfF7z2ZG9RwRX9MbmssyzhH/9990”

How can I get a link from this tokenUri that I pass to the tag src and image is displayed on the screen.
@cryptokid @Yomoo

#2

after you try to access that tokenUri, you will get to this:

{"name":"Legend #9990","description":"Member of the Great House of Legends","image":"ipfs://QmSzK5S3xCb9RfT4jKEr76bAsbpxoFbKGCCXWqiP46HuGd/reveal.png","attributes":[]}

that should also be available as metadata, then you can extract that image link, convert it to a https link from ipfs:// and add it to a src tag

1 Like
#3

The image link in metadata for all the NFTs of the collection is same. Have a look

image
image1597×522 28.4 KB

#4

in this case, maybe the token_uri is not the new one, you could try to resync metadata to see if you get new uri and image:

https://docs.moralis.io/moralis-server/web3-sdk/token#resyncmetadata

you can run it directly from https://admin.moralis.io/web3Api

#5

CryptoKid!

Silly question, but how would I extract that image link?

#6

If you mean from token_uri, you can get it directly after fetching it.

console.log(result.image) // if result is fetched token_uri (in JSON)

If you mean from metadata, you need to parse the JSON string and then you can access it directly.

const metadata = JSON.parse(result[0].metadata); // change based on where `metadata` is

console.log(metadata.image);
#7

Glad you’re the best, thank you!