文章/答案/技术大牛

发布

社区首页 >问答首页 >使用NFT.Storage上传到IPFS时未显示的图像

问使用NFT.Storage上传到IPFS时未显示的图像
EN

Ethereum用户

提问于 2023-03-20 21:05:14

回答 1查看 172关注 0票数 1

我试图上传一个通过NFT.storage稳定扩散到IPFS的图像，但是当我检查我的图像ipfs链接时，它会在屏幕中心显示一个小的灰色框。我认为这意味着上传不正确？实际的元数据看起来是正确的，这正是我遇到问题的图像。我正在使用react.js。

元数据：

https://ipfs.io/ipfs/bafyreifkoil4343lw2zsveykodlp57bfvq76drizg5o46z5chpnkjtivwi/metadata.json

图片：

ipfs://bafybeifoskzsaa3lxxoyzyncujsua4den7djnkbpjho35e5aguepbu4nom/image.jpeg

这是我的代码：

const createImage = async () => {
  console.log("generating...");
  const URL = `https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-2`;

  // Send the request
  const response = await axios({
    url: URL,
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.REACT_APP_HUGGING_FACE_KEY}`,
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    data: JSON.stringify({
      inputs: description,
      options: {
        wait_for_model: true,
        height: 480,
        width: 480,
        num_inference_steps: 200,
        guidance_scale: 5,
      },
    }),
    responseType: "arraybuffer",
  });

  const type = response.headers["content-type"];
  const data = response.data;

  const base64data = Buffer.from(data).toString("base64");
  const img = `data:${type};base64,` + base64data; // <-- This is so we can render it on the page
  setImage(img);
};
const uploadImage = async () => {
  console.log("loading...");
  // Create instance to NFT.Storage
  const nftstorage = new NFTStorage({
    token: process.env.REACT_APP_NFTSTORAGE,
  });

  const { ipnft } = await nftstorage.store({
    image: new File([imageData], "image.jpeg", { type: "image/jpeg" }),
    name: name,
    description: description,
  });

  // Save the URL
  const url = `https://ipfs.io/ipfs/${ipnft}/metadata.json`;
  setURL(url);
  console.log(url);
};

我已经尝试运行我自己的IPFS节点，但仍然得到了前面描述的小灰色框。我也尝试过使用Pinata API，但在图像显示方面仍然存在问题，这使我相信这将与代码的这一部分有关。

const base64data = Buffer.from(data).toString("base64");
const img = `data:${type};base64,` + base64data; // <-- This is so we can render it on the page
setImage(img);

react

ipfs

nft

回答 1

Ethereum用户

发布于 2023-03-21 05:31:32

图像变量需要转换为blob对象，blob对象现在正确地将图像上传到ipfs。

const uploadImage = async () => {
  console.log("loading...");
  // Create instance to NFT.Storage
  const nftstorage = new NFTStorage({
    token: process.env.REACT_APP_NFTSTORAGE,
  });

  const blob = await (await fetch(image)).blob();
  const imageHash = await nftstorage.storeBlob(blob);
  console.log("Image Hash:", blob);

  const { ipnft } = await nftstorage.store({
    image: blob,
    name: name,
    description: description,
  });

  // Save the URL
  const url = `https://ipfs.io/ipfs/${ipnft}/metadata.json`;
  setURL(url);
  console.log(url);
};

票数 0

页面原文内容由Ethereum提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://ethereum.stackexchange.com/questions/147694

复制

相似问题

问使用NFT.Storage上传到IPFS时未显示的图像
EN

回答 1

Ethereum用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用NFT.Storage上传到IPFS时未显示的图像EN

回答 1

Ethereum用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用NFT.Storage上传到IPFS时未显示的图像
EN