Reactjs FastApi - Get azure blob image?

Chris Taverner 0
Viewed 35

I have a developed a Reactjs front end, FastAPI backend and MongoDb database. I want to upload images to a private Azure storage account and consume them on the site.

What I'm struggling to understand is what the best practice is for loading the images?

Should I:

  • Get a SAS key from my API, then go directly from Reactjs to the storage account URL?
  • Get the image from the Azure storage using the API and serve it to the Reactjs
  • A better option?

Thanks in advance

azure-blob-storage fastapi reactjs
1 Answers

Preferred way would be to go with option 1 - Get a SAS key from my API, then go directly from Reactjs to the storage account URL.

The advantages of this approach is that the Browser is directly requesting the images from Azure Storage so that there is less load on your API to fetch and serve the images. You may need to configure CORS settings on your Storage account if your React app is making an Ajax request to fetch the blob contents from Storage.

Doing this way however exposes your SAS URL to the client. If you do not want the clients to know from where the images are being served, then go with option 2.

Gaurav Mantri0
Related