Image not being displayed when uploading to IPFS with NFT.Storage

Question

I am trying to upload an image that is generated by the stable diffusion to IPFS via NFT.storage but when I check my image ipfs link it displays a small grey box in the center of the screen. Which I assume means its not uploading correctly? The actual metadata looks correct its just the image I'm having a problem with. I am using react.js.

Metadata:

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

Image:

ipfs://bafybeifoskzsaa3lxxoyzyncujsua4den7djnkbpjho35e5aguepbu4nom/image.jpeg

Here is my code:

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

I have tried running my own IPFS node but still get the small grey box as described earlier. I have also tried using Pinata API but was still having problems with getting the image to be displayed which leads me to believe that it would be something to do with this part of the code

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

Answer 1

The image variable needed to be converted to a blob object which now uploads the image to ipfs correctly.

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