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.
Join in the discussion - add comment below:
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 -
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”,
});
} catch (error) {
console.log(error);
return error;
}
}
Best of luck
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