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;