How to Successfully Display a Blob Image from FastAPI in Next.js

Описание: Learn how to handle and display blob images coming from FastAPI in your Next.js application by utilizing ArrayBuffers. This guide provides clear steps and code snippets to resolve common issues.
---
This video is based on the question https://stackoverflow.com/q/77773401/ asked by the user 'NicoCaldo' ( https://stackoverflow.com/u/7848740/ ) and on the answer https://stackoverflow.com/a/77774004/ provided by the user 'NicoCaldo' ( https://stackoverflow.com/u/7848740/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, comments, revision history etc. For example, the original title of the Question was: Can't display a blob image coming from FastAPI in Next JS

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
A Guide to Displaying Blob Images from FastAPI in Next.js

When using FastAPI to serve images to a Next.js frontend, you may encounter the frustrating problem of not being able to display a blob image correctly. If you've found yourself struggling with error messages like "Not allowed to load local resource," you're not alone. In this guide, we will explore this issue and outline a step-by-step solution that will help you successfully show images fetched from your FastAPI backend.

Understanding the Problem

In essence, when you ask your FastAPI server to send an image, it responds with a binary blob. While you've set everything up correctly—your server can serve the image successfully— Next.js does not allow loading images from blob URLs directly due to security restrictions. This can result in the aforementioned error and prevent the image from being displayed on your client-side application.

The Steps to Solve the Issue

To resolve this problem, you'll need to make changes both on the server-side (FastAPI) and on your client-side (Next.js). Let’s break it down:

Server-Side Adjustments

You’re using FastAPI to return the image as a response. To handle small adjustments, here’s how you would typically retrieve the image blob from the FastAPI endpoint:

Returning the Image: Your FastAPI function should return the image as follows:

[[See Video to Reveal this Text or Code Snippet]]

This part is correct as it serves the image when accessed via the API.

Fetching and Processing the Image in Next.js

Next, you will fetch this blob in your Next.js application and convert it properly to display it.

Fetch and Convert the Blob: Use the following snippet in your server action:

[[See Video to Reveal this Text or Code Snippet]]

This code fetches the blob and converts it into an ArrayBuffer, which is more amenable for further processing.

Converting the ArrayBuffer to URL on Client-Side: On the client-side, handle the fetched data as follows:

[[See Video to Reveal this Text or Code Snippet]]

This code takes the ArrayBuffer, converts it into a binary format and then creates a compliant object URL for it.

Displaying the Image

Finally, with the imageBase64 URL created, you can now display your image in your Next.js component like so:

[[See Video to Reveal this Text or Code Snippet]]

Adding the image to your component like this will now permit the browser to fetch and show the image.

Conclusion

Handling blob images from a FastAPI backend in a Next.js application can be tricky due to the nature of how different environments handle binary data. By making the appropriate adjustments in fetching and processing the blob, specifically by using ArrayBuffer, you can seamlessly display your images without running into errors.

Now that you have the steps outlined, go ahead and apply these changes to your application. You should now be able to view images served by your FastAPI API in your Next.js app without any issues.

For any further questions or dilemmas, feel free to reach out!