[SOLVED] IPFS image is not displayed

Hello,

I watched the following YouTube video and successfully minted my first NFT.


However, my issue is that IPFS returns no image even after 24 hours. Metadata went through.

Here is the code according to the tutorial.

const nft_contract_address = "0x0Fb6EF3505b9c52Ed39595433a21aF9B5FCc4431"

const web3 = new Web3(window.ethereum);

async function upload(){
  const data = "MY-PNG-IMAGE"";
  const imageFile = new Moralis.File("image.png", { base64: data });
    document.getElementById('doMint').setAttribute("disabled", null);
    document.getElementById('name').setAttribute("disabled", null);
    document.getElementById('description').setAttribute("disabled", null);

  await imageFile.saveIPFS();
  const imageURI = imageFile.ipfs();
  const metadata = {
      "name":"NAME HERE",
      "description":"DESCRIPTION HERE",
      "image":imageURI,
  }
  const metadataFile = new Moralis.File("metadata.json", {base64 : btoa(JSON.stringify(metadata))});
  await metadataFile.saveIPFS();
  const metadataURI = metadataFile.ipfs();
  const txt = await mintToken(metadataURI).then(notify)
}

async function mintToken(_uri){
  const encodedFunction = web3.eth.abi.encodeFunctionCall({
  name: "mintToken",
    type: "function",
    inputs: [{
      type: 'string',
      name: 'tokenURI'
      }]
  }, [_uri]);

  const transactionParameters = {
    to: nft_contract_address,
    from: ethereum.selectedAddress,
    data: encodedFunction
  };
  const txt = await ethereum.request({
    method: 'eth_sendTransaction',
    params: [transactionParameters]
  });
  return txt
}

async function notify(_txt){
  document.getElementById("resultSpace").innerHTML =  
  `<input disabled = "true" id="result" type="text" class="form-control" placeholder="Description" aria-label="URL" aria-describedby="basic-addon1" value="Your NFT was minted in transaction ${_txt}">`;
}

upload();
mintToken();
notify();

What did I do wrong regarding the IPFS?
How can I ensure IPFS catch my image?

Thanks in advance.

It looks like the metadata for that NFT wants to use a video (not an image), you may need to change the metadata for OpenSea’s standards so that they display it:

From:

{"name":"VOXEL","description":"yoshiyoshi","image":"https://ipfs.moralis.io:2053/ipfs/QmdmH242m9rFwmaL5gj2WQTkYYfzV7GDB2fzT5GNK1SSqV"}

To:

{"name":"VOXEL","description":"yoshiyoshi","animation_url":"https://ipfs.moralis.io:2053/ipfs/QmdmH242m9rFwmaL5gj2WQTkYYfzV7GDB2fzT5GNK1SSqV"}

Even then however, that IPFS link (QmdmH…) seems to be broken, so that needs to be fixed first (reupload to IPFS).

If it was meant to be an image, you just need to reupload and test that the image works first through the IPFS link (ipfs.moralis.io)

Yes, I want to upload an image. I accessed to http://ipfs.moralis.io . I don’t know why I cannot open any image from the URL.

You will need to re-upload your image to IPFS, so check your code that you’re using (with Moralis.File). Don’t worry about OpenSea for now.

I’m not sure how that screenshot is related.

Yes, I have re-uploaded and but still the same result with this code:
const imageFile = new Moralis.File("image.png", { base64: data });

I get an error when I run the code. Is this related to my issue? It seems the image is not caught right.

ah, I though I should have accessed to http://ipfs.moralis.io to sea if I can upload an image. What does the URL work for?

const data = “MY-PNG-IMAGE”";

data should be a base64 string. Are you using “MY-PNG-IMAGE” like this or is this just an example that you have made. You can try with a different base64 image string. You can check docs here.

http://ipfs.moralis.io

You don’t access this domain directly, this is a gateway for accessing IPFS content. For example, this is a link to access the token_uri/metadata for that Voxel NFT you posted: https://ipfs.moralis.io:2053/ipfs/QmRCaQQFwtNg6g7VPfDwFpuQC8dVB4oLXhwXdhxTmvwgrp which you can also access with a different gateway like https://gateway.moralisipfs.com/ipfs/QmRCaQQFwtNg6g7VPfDwFpuQC8dVB4oLXhwXdhxTmvwgrp or https://ipfs.io/ipfs/QmRCaQQFwtNg6g7VPfDwFpuQC8dVB4oLXhwXdhxTmvwgrp.

This is it. I assumed the image is already base64. I put some code to covert it to base64 and it worked!
Thanks always.