title: How to append fetched image URL to img src
body: <p>I am trying to append the fetched url from a minted NFT jsons metadata to a &lt;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.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>      .then(async(receipt) =&gt; {
          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)</code></pre>
  </div>
  </div>
  </p>
  <p>When I console.log the link I get the correct Image Url but when I try to append I get this error <a href="https://i.stack.imgur.com/CPQaa.png" rel="nofollow noreferrer">enter image description here</a> (I can not embed yet my apologies) All help appreciated thank you.</p>
  <p>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</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    {minted ? &lt;s.Screen id="nft"&gt;
        &lt;MintingVideo src="/config/mint.mp4" autoPlay={true} &gt;&lt;/MintingVideo&gt; 
        &lt;template id="nft_template"&gt;
      &lt;section&gt;
        &lt;h1&gt;&lt;/h1&gt;
  
        &lt;a href="" target="_blank"&gt;
          &lt;img src={null} alt=""&gt;&lt;/img&gt;
        &lt;/a&gt;
      &lt;/section&gt;
    &lt;/template&gt;
      &lt;/s.Screen&gt;
      : null}</code></pre>
  </div>
  </div>
  </p>