I tried doing this tutorial, but when I launch the webpage nothing shows up. Has anyone else tried this tutorial? I attached some pictures of my code too.
Hi,
You have a typo in code in fixURL, it should be ipfs.moralis.io:2053.
Hey @areed15
Please post your code as a code and not as a picture. After that we will be able to debug it 
Here is my code.
<title>DisplayTest</title>
<script>
Moralis.initialize("lRCkcYjDbFtpxYwnA4un13UtUi7RqBfVtyjx5g0n"); // Application id from moralis.io
Moralis.serverURL = "https://kprjvwm59njt.moralisweb3.com:2053/server"; //Se
async function getNFTs(){
const options = { chain: 'eth', address: '0x023286bce3570cbb1c26C64844cEfF38CcC48d1A'}
const nfts = await Moralis.Web3.getNFTs(options);
//const options = { chain: 'ethereum', address: '0x495f947276749Ce646f68AC8c248420045cb7b5e' };
//const ethereumNFTs = await Moralis.Web3.getNFTs(options);
//console.log(userEthNFTs); //print nfts to console
nfts.foreach(function(nfts){
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=100 height=100 src='"+fixURL(data.image)+"'/img");
});
})
}
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"
}
}
getNFTs()
Hi,
It looks like you have to update your Moralis server, and then you can start debugging it. There are multiple typos, like:
nfts.foreach(function(nfts){
let url = fixURL(nft.token_uri);
where it should be:
nfts.forEach(function(nft){
let url = fixURL(nft.token_uri);
A version that uses my server and doesn’t display pictures properly:
<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("TAXZpkfV4FbCnoY592sUJuCXak26hdgBxUz5oqqU");
Moralis.serverURL = "https://mtpbh2zhvqjd.moralis.io: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: 'eth', address: '0x023286bce3570cbb1c26C64844cEfF38CcC48d1A'}
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()+"<pre>img src='"+fixURL2(data.image)+"'</pre>");
});
})
}
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>
Do you know how to get the images to display? The images are what I am most interested in displaying.
Ivan,
Just a heads up on the latest marketing blast that went out regarding the Must have tool for NFT exploration and data migration etc…
Recieved inm my inbox and of course I jumped to see what you had going on there… and the link went to a page not found url. see attached.
In any case, just a minor bit of support. In case you want to get that out again with a the correct URL to the content. BTW, It was because of your videos some years ago that I began to study and work with solidity development and all the rest. Its been quite a journey, and Im a big fan. Love the work you do and the incredible talent you and your team seem to have - and openess in sharing with the defi community at large.
Cheers. Deus.
In order to show the images you’ll have to change this line:
$("#content").html($("#content").html()+"<pre>img src='"+fixURL2(data.image)+"'</pre>");
in something like
$("#content").html($("#content").html()+"<img src='"+fixURL2(data.image)+"'></img>");
it will not work for all images, but for some of them will work. Because there are multiple URL formats on all those NFTs you’ll have to make a more generic function to fix the url in order to make all images to show properly.
Okay, that makes sense. This is one of the URIs I am trying to display.
This was pulled from getNFTs results. This takes me to a page with all the metadata. From here I can find the actual link for the image.
Do I have to fix the URI to pull the image from the image url? Any pointers on doing this?
If you get to that actual link for the image, then this would be enough to show the image:
<img src="https://lh3.googleusercontent.com/aDkiSRRrdqITkVvFqdpxd6_3_7AFYsiVl-kbvjyH7-drWJxRxm3-2gz0MI7cgoMCzR5kF5yqWzAu7qKyNvZOITvLEGK0_tW3gM5RhA" width="300" height="400">
But this would mean to get the metadata and from metadata to get the URI.
You could use fetch(url) in order to get the metadata. Moralis may do this automatically in the future, but for now you could treat it as a special case and extract the metadata with fetch(url) and after that to get the final URI.
Or your question is how to get the metadata from https://api.opensea.io/api/v1/metadata/0x495f947276749Ce646f68AC8c248420045cb7b5e/0x9bd32202ec4c0841be54e9764df83a5f69ac09650000000000000e0000000001?
If a user is logged in to website I want to be able to diplay the image of certain nfts in the wallet. So my question is how would you make the code fetch the image from the metadata link https://api.opensea.io/api/v1/metadata/0x495f947276749Ce646f68AC8c248420045cb7b5e/0x9bd32202ec4c0841be54e9764df83a5f69ac09650000000000000e0000000001?
You need to get to this link: https://api.opensea.io/api/v1/metadata/0x495f947276749Ce646f68AC8c248420045cb7b5e/0x9bd32202ec4c0841be54e9764df83a5f69ac09650000000000000e0000000001?format=json
in order to do that you add it "?format=json" at the end and after that you fetch it.
that is what
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()+"<pre>img src='"+fixURL2(data.image)+"'</pre>");
was supposed to do, but I created a fixURL2 function that doesn’t add that "?format=json", original fixURL function was doing that.
1 Like
Thank you for explaning the code. I have a better understanding of what is going on now.
2 Likes
When trying to display the nfts on the website I am getting some errors! I uploaded a picture of the error message I am getting. Is this error happening because I am accessing the open-sea metadata link too much? I got a Chrome Extension Allow CORS: Access-Control-Allow-Origin and it has reduced the number of nfts that have failed to load by 50%. I am just wondering if something is wrong with the code and the extension was just a temporary bandaid. Also, I am hoping people that use the dapp don’t have to download the extension.
Hi,
It looks like there is a tutorial on how to fix this error using cloud functions: https://www.youtube.com/watch?v=2nF76NMQ9JA&ab_channel=MoralisWeb3
3 Likes
I am having the same issue!!I am unable to display the nfts?