How to append fetched image URL to img src

Question

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}

Answer 1

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;