Display images from nft metadata?

Hi,

I am getting NFTS from token.
For example for contract token: 0x32895105b3a65da694c63a3f5f7347d5ebf07f07
I get response in metadata like this:

{
“image”: “ar://2HFbV6jOuC3ejGCQcy1du3vplBqOpYsMSFdlDOACAp4”,
“hash”: “5782ac45608c77ed428eb88a6f3ff2ccebd100f8ca136e80b998d2fe60f826c6”,
“attributes”: [
{
“trait_type”: “Fur”,
“value”: “Light Brown”
},
{
“trait_type”: “Costume”,
“value”: “Ethman”
},
{
“trait_type”: “Mouth”,
“value”: “Meh”
},
{
“trait_type”: “Eyes”,
“value”: “Female”
},
{
“display_type”: “number”,
“trait_type”: “Level”,
“value”: 22
},
{
“display_type”: “number”,
“trait_type”: “XP”,
“value”: “839864”
},
{
“trait_type”: “Strength”,
“value”: 17
},
{
“trait_type”: “Intelligence”,
“value”: 18
},
{
“trait_type”: “Agility”,
“value”: 30
},
{
“trait_type”: “Defence”,
“value”: 69
}
],
“name”: " Dark Super Bunny #5319",
“description”: “Dark Super Bunnies are rare, conflicted superheroes sworn to defend the metaverse… while battling their demons.”
}
As you can see the image is “ar://2HFbV6jOuC3ejGCQcy1du3vplBqOpYsMSFdlDOACAp4”.
How to display image? What’s the URL to actual image?

I am parsing it and if have https:// it’s URL to image, all good.
If have ipfs it’s than https://gateway.moralisipfs.com/ipfs/{ipfs}
If have “data:image…” again, all good.

Is there any other “case” for images?
How do you do it?

Thanks!

ar:// is an Arweave image so for example you can change that link from:

ar://2HFbV6jOuC3ejGCQcy1du3vplBqOpYsMSFdlDOACAp4

to

https://arweave.net/2HFbV6jOuC3ejGCQcy1du3vplBqOpYsMSFdlDOACAp4

Thanks @glad!
Any other “case”? :slight_smile:

If you find another Arweave link be sure it works the same way. I think that’s nearly all of them. Maybe an odd case where the image only has a hash. You can handle things gracefully by showing a broken image with a link to the original.

What in that case would be different?
Thanks, hope I covered all.

It should be the same but I’m not too familiar with Arweave.

Ah ok, thank you.
Maybe someone will provide another possible solution.