Displaying images from azure blob container
Thanks to the comments from Gaurav I was able to work out my problem.
I was downloading the file as below
CloudBlockBlob blockBlob = blobContainer.GetBlockBlobReference(fileName);
blockBlob.Properties.ContentType = "image/jpg";
blockBlob.SetProperties();
return blockBlob;
But when storing the file I was not setting the content type so it was being saved as application/octet-stream
and the above code was trying to convert the type when calling the file. By setting the type prior to uploading I was able to simply call the file and have it displayed as an image e.g.
CloudBlockBlob blockBlob = blobContainer.GetBlockBlobReference("my-image-blob");
blockBlob.Properties.ContentType = "image/jpg";
using (var fileStream = System.IO.File.OpenRead(filePath))
{
blockBlob.UploadFromStream(fileStream);
}
tony09uk
Updated on June 09, 2022Comments
-
tony09uk over 1 year
I have an asp mvc application where I am trying to display images that have been stored in Azure blob storage.
When I return the string the browser just shows as a broken image. When I right click and "inspect" and click the generated URI I recieve the following message
BlobNotFound
The specified blob does not exist. RequestId:f7c32876-0001-013e-539d-dede28000000 Time:2016-07-15T13:30:49.7560775ZI have downloaded
Azure Storage Explorer
and can see the file. I have tried to change the access levels on the container toread access for blobs only
fromno public access
(but I thought I did that in code with the linePublicAccess = BlobContainerPublicAccessType.Blob
).How do I display images that are contained in storage?
public string Index() { CloudBlockBlob blob = GetBlobInContainer("blobContainerTjsContainer", "PS-ICON-120x120_140.jpg"); return "<img src="+ blob.Uri.AbsoluteUri +" alt='PS Image'>"; } CloudBlockBlob GetBlobInContainer(string container, string fileName) { //use web.config appSetting to get connection setting .NET Framework's ConfigurationManager class can also be used for this CloudStorageAccount storageAccount = CloudStorageAccount.Parse(CloudConfigurationManager.GetSetting("StorageConnectionString")); //create the blob client CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient(); //retrieve a refernce to a container CloudBlobContainer blobContainer = blobClient.GetContainerReference(CloudConfigurationManager.GetSetting(container)); //set permission to show to public blobContainer.SetPermissions(new BlobContainerPermissions { PublicAccess = BlobContainerPublicAccessType.Blob}); blobContainer.CreateIfNotExists(); // Retrieve reference to a blob named "photo1.jpg". CloudBlockBlob blockBlob = blobContainer.GetBlockBlobReference(fileName); return blockBlob; }
EDIT
After further reading I have changed
// Retrieve reference to a blob named "photo1.jpg". CloudBlockBlob blockBlob = blobContainer.GetBlockBlobReference(fileName); return blockBlob;
to
// Retrieve reference to a blob named "photo1.jpg". CloudBlockBlob blockBlob = blobContainer.GetBlockBlobReference(fileName); blockBlob.Properties.ContentType = "image/jpg"; blockBlob.SetProperties(); return blockBlob;
this changes returns an exception
Exception Details: System.Net.WebException: The remote server returned an error: (404) Not Found.
Do I need to do something different at the time of uploading?
Edit
@Gaurav Mantri
I can see that it is stored as
application/octet-stream
but when I tried to change this to image/jpg usingblockBlob.Properties.ContentType = "image/jpg"; blockBlob.SetProperties();
I got a 404 exception at set properties. When I pull the image, while debugging I can see the image name is the same as it was when I uploaded it
at the time of uploading I used the below code
void UploadFile(string filePath) { //use web.config appSetting to get connection setting .NET Framework's ConfigurationManager class can also be used for this CloudStorageAccount storageAccount = CloudStorageAccount.Parse(CloudConfigurationManager.GetSetting("StorageConnectionString")); //create the blob client CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient(); //retrieve a refernce to a container CloudBlobContainer blobContainer = blobClient.GetContainerReference(CloudConfigurationManager.GetSetting("blobContainerTjsContainer")); //create a container if it doesnt exist blobContainer.CreateIfNotExists(); //gets the reference to the blob that will be written or OVER written CloudBlockBlob blockBlob = blobContainer.GetBlockBlobReference("my-image-blob"); using (var fileStream = System.IO.File.OpenRead(filePath)) { blockBlob.UploadFromStream(fileStream); } }