How to display the generated image using React.js?

Question

Hello, thanks for your reading.
I generated image using text input and get the result successfully.
But I can't display the result image in img tag.
The getting response is success and now I don't know how can I process this result and how can I display this result as image.
I checked the response in browser inspect window and the response is good. It seems to look as binary data.
So I want to know about how to display the image using React.js?
Please solve this problem. Best regards.

David Zuk · Answer

Hi. i have encountered the same problem and after consulting with chat gpt we came up with this. 
hope it will help you

function from the component -

>  async function getTextToImage() {
>     try {
>       const { data, headers } = await textToImage();
>       if (headers && headers["content-type"]) {
>         const blob = new Blob([data], { type: headers["content-type"] });
>         const imageSrc = URL.createObjectURL(blob);
>         setImage(imageSrc);
>       } else {
>         console.error("Error: Content-Type header is missing or undefined.");
>       }
>     } catch (error) {
>       console.error("Error:", error);
>     }

service function -

export async function textToImage() {
  const params = {
    prompt:
      "magical dolphin , masterpiece, highly detailed , photorealistic , trending, HQ",
    guidance: 10,
    steps: 30,
    sampler: "euler_a",
    upscale: 1,
    negative_prompt: "face",
    model: "epic_diffusion_1_1",
  };
  try {
    const response = await httpServices.post("/api/text2image", params, {
      responseType: "arraybuffer",
    });

return response;
  } catch (error) {
    console.log(error);
    return error;
  }
}

Best of luck

dezgo · Answer

Hello,
thanks for reaching out and for using the API!

I do not have experience with React.js in particular, but here's a link that explains how to do it in vanilla JS: https://rapidapi.com/dezgo/api/dezgo/tutorials/how-to-query-the-api-from-a-web-browser-and-display-the-image-with-an-img-element

The most common cause could be that the response is interpreted as a string of text, instead of as a binary blob.

Hope this helps!

Best regards

Dezgo

9.9 / 10

3,642ms

100%

How to display the generated image using React.js?