How to print out image of NFT

Moralis General
#1 

async function populate(){
    const nft = await Moralis.Web3API.account.getNFTs({chain: 'matic'});
    return buildTableNFT(nft);
}

async function buildTableNFT({result}) {
    document.getElementById("resultNFT").innerHTML = `
        <table class="table table-dark table-striped" id="nftTable">
        </table>
    `;
    const table = document.getElementById("nftTable");
    const rowHeader = `
        <thead>
            <tr>
                <th>ID</th>
                <th>Type</th>
                <th>Contract</th>
                <th>Image</th>
            </tr>
        </thead>
    `;
    table.innerHTML += rowHeader;
    for (let i = 0; i < result.length; i++) {
        let url = result[i].token_uri;
        const response = await fetch(url);
        const data = await response.json();
        const image = data.image;
        console.log(image)
        const row = `
            <tr>
                <td>${result[i].token_id}</td>
                <td>${result[i].contract_type}</td>
                <td><h4>${result[i].token_address}</h4></td>
                <td><img src="${image}"></td>
            </tr>
        `;
        table.innerHTML += row;
    }
}

I have this code and I get the url of the image in the console but for some reason it wont show on my site.
please help anyone

#2

What do you get here? Sometimes it is an ipfs url that has to be converted to a http one

#3

mostly just the url of the image


I know this image is a mp4 but thats what shows up as a thumbnail
ok actually I just double checked and it works when there is a.png / .jpg url

let me try using bored ape or something

#4

Ok, it works for some NFTs on my address
But when I use for example bred ape address
async function populate(){

const nft = await Moralis.Web3API.account.getNFTs({chain: 'eth', address: '0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D'}).then(buildTableNFT);
    return buildTableNFT(nft);

This gives me this error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://meta.hapeprime.com/1039. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
}

#5

It looks like you get that error when trying to get the metadata. It can happen that the url doesn’t work, or it doesn’t allow you to access it from localhost.

You could try to deploy your code on a server, or to use 127.0.0.1 instead of localhost, or to get the metadata using a cloud function.

#6

i tried to deploy it on surge but its not working

#7

still same CORS errors?

#8

yes
i tried with hosting it on surge and also with localhost

#9

you got any fix forthis issue?

#10

there is a possible fix, it is not easy:

#11

everything is easy if you know how to do it :wink:
thanks i will look into it