CODEWITHSUNDEEP
azureazure-blob-storage
MaLKaV_eS
MaLKaV_eS

Reputation: 1325

Azure blob image not loading in browser

We upload some customers files to an azure storage account and then allow access to them from web app.

I have a problem with some files over 1 Mb as webbrowsers display them as a blank square but they are correctly uploaded and can be downloaded to.

What really puzzles me is that the response headers are all ok but the image is not displayed.

Example response headers:

Upvotes: 2

Views: 2370

Answers (2)

Thiago Custodio
Thiago Custodio

Reputation: 18387

the only thing that comes to my mind is that the content type is not being set when creating the blob. Take a look if your code looks like the following;

var blobServiceClient = new BlobServiceClient("YOURCONNECTIONSTRING");
var containerClient = blobServiceClient.GetBlobContainerClient("YOURCONTAINERNAME");
var blob = containerClient.GetBlobClient("YOURFILE.jpg");

var blobHttpHeader = new BlobHttpHeaders { ContentType = "image/jpeg" };
 
var uploadedBlob = await blob.UploadAsync(YOURSTREAM, new BlobUploadOptions { HttpHeaders = blobHttpHeader });

PS: the last two lines

Upvotes: 0

Kartik Bhiwapurkar
Kartik Bhiwapurkar

Reputation: 5159

• Please ensure that the below HTTP parameters in the header are set as below accordingly such that the images are displayed correctly and not like squares depicting them: -

 Cross-Origin-Resource-Policy : *
 Content-Security-Policy : CSP Level 3

Also, do ensure that the browser versions are up-to date and the setting ‘Block third party cookies’ is disabled. You will have to go to ‘Settings --> Privacy and Security --> Site settings --> Cookies and site data --> Set ‘Block third party cookies to OFF’'

• Do also ensure that you are disabling the ‘Flash and Ads Blocker extension’ such that the images content from other unauthenticated and unvalidated origins is also allowed. Finally, also please ensure that the browser that you are using is up to date with necessary security updates such that the ‘Content Security Policy’ is supported by them for reducing the attack surface of CSS (Cross-Site-Scripting) attacks.

Please refer the below link for more details: -

https://content-security-policy.com/#:~:text=The%20Content-Security-Policy%20header,is%20often%20abbreviated%20as%20CSP%20.

https://www.geeksforgeeks.org/http-headers/

Upvotes: 1

Related Questions