How to get image of NFT

Moralis General
#1

With this I get the token.uri of my NFT#s

for (let i=0; i < data.length; i++){
        let row = `<tr>
                        <td>${data[i].token_id}</td>
                        <td>${data[i].contract_type}</td>
                        <td><h4>${data[i].token_address}</h4></td>
                        <td>${data[i].token_uri}</td>
                    </tr>`
        table.innerHTML += row

Which gives me the ipfs link like this
https://ipfs.moralis.io:2053/ipfs/QmVn9VnbeDhSG797ytBmLPfkAiizow9eXTpq7f58yUkQWe/0

but how can I print oout the actual image of the NFT in a table, using above example

I tried
<td><img src="${data[i].token_uri['image'}"></td>
but this doesnt do the trick
can anyone help, please?

#2

this should be the metadata from that IPFS link:

{"name":"drop1","description":"","image":"ipfs://QmPk4py59eWaWPFqByDrXnoz4r4knthxBykovzwHaq21DM","external_url":"","background_color":"","properties":[]}

you can check if metadata field is set for that token_id and you can extract the mage from there

#3

is there a solution for this?
A code would be helpful
Ivan uploads a video and nobody can see the code, i dont know whats the ponit of making a video if you cant see the code

1 Like
#4

ok, it is not easy, from this link: ipfs://QmPk4py59eWaWPFqByDrXnoz4r4knthxBykovzwHaq21DM
you have to get to another link like https://ipfs.io/ipfs/QmPk4py59eWaWPFqByDrXnoz4r4knthxBykovzwHaq21DM

#5

its not easy, well just share the code, you guys have already done it so why dont you just share instead of saying its not easy
and i agree its not easy to make this work if you watch a video and you cant see the code, lol

#6

from ipfs://QmPk4py59eWaWPFqByDrXnoz4r4knthxBykovzwHaq21DM you have to get to https://ipfs.io/ipfs/QmPk4py59eWaWPFqByDrXnoz4r4knthxBykovzwHaq21DM

#7

dude, I know, but I would like to see a code on how to do this
by the way is there a github for the code ivan uses, his video is pretty useless without a code.

#8

you can find some examples on forum: How To Get User NFTs? All NFTs Owned by Address - @Ivan on Tech Explains

#9

ok that helps dude thanks

#10

I fixed the chain issue but nothing ever works out the box, I dont understand why there isnt a code I can just copy and paste and it works
there is always nothing but issues, this is so frustrating, i have to ask about everything cause nothing works

I dont understand why you even make tutorials that dont work, honestly whats the point doing this?
Everytime I can rewrite the code cause everything changes all the god damn time

#11

that tutorial is a little outdated, things change over time

#14 
WORKING CODE

<html>
<head>
    <script src="https://npmcdn.com/[email protected]/dist/moralis.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="content"></div>

<script>
        Moralis.initialize("JOCJo0Op04E0uAJmjSLmF7DpdSq0IJSEotT908tg");
        Moralis.serverURL = "https://z1huwvjybope.usemoralis.com:2053/server";

   // Moralis.initialize("lRCkcYjDbFtpxYwnA4un13UtUi7RqBfVtyjx5g0n"); // Application id from moralis.io
  //Moralis.serverURL = "https://kprjvwm59njt.moralisweb3.com:2053/server"; //Se

  async function getNFTs(){

    const options = { chain: 'matic', address: 'wallet address here'}

    const nfts = await Moralis.Web3.getNFTs(options);
    console.log(nfts);

    nfts.forEach(function(nft){
       let url = fixURL(nft.token_uri);
       fetch(url)
      .then(response => response.json())
      .then(data => {
         $("#content").html($("#content").html()+"<h2>"+data.name+"</h2>");
         $("#content").html($("#content").html()+"<h3>"+data.description+"</h3>");
         $("#content").html($("#content").html()+"<img width=200 hight=100 src='"+fixURL2(data.image)+"'/>");
      });

    })

 }

 function fixURL(url){
   if(url.startsWith("ipfs")){
     return "https://ipfs.moralis.io:2053/ipfs/"+url.split("ipfs://ipfs/").slice(-1)[0];
    }
   else{
    return url+"?format=json"
    }
 }
 function fixURL2(url){
   if(url.startsWith("ipfs")){
     return "https://ipfs.moralis.io:2053/ipfs/"+url.split("ipfs://").slice(-1)[0];
    }
 }

  getNFTs()


    </script>
</body>
</html>
1 Like