title: Displaying images from azure blob container
body: <p>I have an asp mvc application where I am trying to display images that have been stored in Azure blob storage.</p>
  
  <p>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</p>
  
  <blockquote>
    <p>
    <Code>BlobNotFound</Code>
    
    The specified blob does not exist. RequestId:f7c32876-0001-013e-539d-dede28000000 Time:2016-07-15T13:30:49.7560775Z
    
    </p>
  </blockquote>
  
  <p>I have downloaded <code>Azure Storage Explorer</code> and can see the file. I have tried to change the access levels on the container to <code>read access for blobs only</code> from <code>no public access</code> (but I thought I did that in code with the line <code>PublicAccess = BlobContainerPublicAccessType.Blob</code>).</p>
  
  <p>How do I display images that are contained in storage?</p>
  
  <pre><code>public string Index()
      {
          CloudBlockBlob blob = GetBlobInContainer("blobContainerTjsContainer", "PS-ICON-120x120_140.jpg");
          return "&lt;img src="+ blob.Uri.AbsoluteUri +" alt='PS Image'&gt;";
      }
  
  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;
      }
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>After further reading I have changed</p>
  
  <pre><code>// Retrieve reference to a blob named "photo1.jpg".
          CloudBlockBlob blockBlob = blobContainer.GetBlockBlobReference(fileName);
          return blockBlob;
  </code></pre>
  
  <p>to</p>
  
  <pre><code>// Retrieve reference to a blob named "photo1.jpg".
          CloudBlockBlob blockBlob = blobContainer.GetBlockBlobReference(fileName);
          blockBlob.Properties.ContentType = "image/jpg";
          blockBlob.SetProperties();
          return blockBlob;
  </code></pre>
  
  <p>this changes returns an exception</p>
  
  <blockquote>
    <p>Exception Details: System.Net.WebException: The remote server returned an error: (404) Not Found.</p>
  </blockquote>
  
  <p>Do I need to do something different at the time of uploading?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>@Gaurav Mantri</p>
  
  <p><a href="https://i.stack.imgur.com/10NuZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/10NuZ.png" alt="azure storage"></a></p>
  
  <p>I can see that it is stored as <code>application/octet-stream</code> but when I tried to change this to image/jpg using</p>
  
  <pre><code>blockBlob.Properties.ContentType = "image/jpg";
      blockBlob.SetProperties();
  </code></pre>
  
  <p>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</p>
  
  <p>at the time of uploading I used the below code</p>
  
  <pre><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);
          }
      }
  </code></pre>