I am trying to append the fetched url from a minted NFT jsons metadata to a <img src so that the picture can then be seen inside the dapp. I have fetched the tokenId from the receipt and then used the tokenId with the ipfs link to grab the metadata and then return the image URL which all works fine I have just hidden some code with the personal information.
.then(async(receipt) => {
console.log(receipt);
setMinted(true)
const tokenIds = {ipfslink}.json
const tokenMetadataResponse = await fetch(`/config/json/${tokenIds}.json`, {
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
});
const tokenMetadata = await tokenMetadataResponse.json();
const image = tokenMetadata.image;
console.log(image)
const nftHolder = document.getElementById("nft_template").content.cloneNode(true)
nftHolder.querySelector("img").src = image.toString();
nftHolder.querySelector("img").alt = tokenMetadata.description
document.getElementById("nfts").append(nftHolder)When I console.log the link I get the correct Image Url but when I try to append I get this error enter image description here (I can not embed yet my apologies) All help appreciated thank you.
Here is where the img element lies, I have a video that plays upon the receipt of the transaction that indicates a successful mint for the animation that I intend to play with the image. So when the receipt occurs it turns the minted state to true which you can see in the above code
{minted ? <s.Screen id="nft">
<MintingVideo src="/config/mint.mp4" autoPlay={true} ></MintingVideo>
<template id="nft_template">
<section>
<h1></h1>
<a href="" target="_blank">
<img src={null} alt=""></img>
</a>
</section>
</template>
</s.Screen>
: null}I have solved this I believe by giving the image a placeholder source that is just a white background.
<s.Screen> //Screen holding all components displayed whether minted is true or not
{minted ? <s.Screen id="nft">
<MintingVideo src="/config/mint.mp4" autoPlay={true} ></MintingVideo>
<NftBox id="nftBox"src="/config/images/plah.png"></NftBox>
</s.Screen>
: null}And then here is where I target the element and change the source to the one provided
const tokenMetadataResponse = await fetch(`/config/json/${tokenIds}.json`, {
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
});
const tokenMetadata = await tokenMetadataResponse.json();
let image = tokenMetadata.image
if(image.startsWith("ipfs://")) {
image = `https://ipfs.io/ipfs/${tokenMetadata.image.split("ipfs://")[1]} `
};
console.log(image)
const nftHolder = document.getElementById("nft").content
const dNftBox = document.getElementById("nftBox");
dNftBox.src = image;