How to display an image in browser from azure blob storage without getting authentication error?

Question

I have an image in Azure Local Storage with uri: http://127.0.0.1:10000/devstoreaccount1/profilepics/c2364829-ee9f-4c26-925b-dedb8d4465ca. But when I try to display the image via my web app like <img src="http://127.0.0.1:10000/devstoreaccount1/profilepics/c2364829-ee9f-4c26-925b-dedb8d4465ca", I get an 403 status code: 403 Server failed to authenticate the request. Make sure the value of the Authorization header is formed correctly including the signature.

How do I form the authorization header?

This is an angular web app in .net core 3.2.

Answer 1

An easy way is by generating a SAS (Shared Access Signature). There are a few ways to do that:

• using code:

https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-user-delegation-sas-create-dotnet

https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-user-delegation-sas-create-powershell

https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-user-delegation-sas-create-cli

• using Storage Explorer:

https://learn.microsoft.com/en-us/azure/storage/blobs/storage-quickstart-blobs-storage-explorer#work-with-shared-access-signatures