如何将获取的图像URL附加到IMG SRC

Question

我试图将所取的URL从铸造的NFT JSONS元数据附加到a＆lt; img src，以便然后在DAPP内看到图片。我已经从收据中获取了代币，然后将tokenid与ipfs链接使用来获取元数据，然后返回图像URL，所有这些都可以正常工作，我刚刚隐藏了一些带有个人信息的代码。

      .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)

当我主持链接时，我会得到正确的映像URL，但是当我尝试附加时，我会得到此错误图像描述在这里（我无法嵌入我的道歉），所有人都帮助您感谢。

这是IMG元素所在的地方，我有一个视频，该视频在收到交易时播放，这表明我打算使用图像播放的动画成功的薄荷。 因此，当收据发生时，它将铸造状态转变为True，您可以在上面的代码中看到

    {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

我已经通过给图像作为占位符的来源来解决这一问题，这只是白色背景。

    <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}

然后，这是我针对元素的地方，然后将源更改为提供的元素

          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;