Displaying images from azure blob container

Question

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.7560775Z

I have downloaded Azure Storage Explorer and can see the file. I have tried to change the access levels on the container to read access for blobs only from no public access (but I thought I did that in code with the line PublicAccess = 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 using

blockBlob.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);
        }
    }

Answer 1

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);
}