CODEWITHSUNDEEP
reactjsazure-blob-storagefastapi
Chris Taverner
Chris Taverner

Reputation: 57

Reactjs FastApi - Get azure blob image?

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:

Thanks in advance

Upvotes: 0

Views: 330

Answers (1)

Gaurav Mantri
Gaurav Mantri

Reputation: 136266

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.

Upvotes: 1

Related Questions