How to display images in .cshtml page from Private Azure Storage in MVC?

Question

I'm getting following error on inspecting the html page:

<Error>
    <Code>AuthorizationFailure</Code>
    <Message>This request is not authorized to perform this operation.
           RequestId:7b853423-101e-0015-51e5-905acd000000
           Time:2020-09-22T13:38:05.2479851Z
    </Message>
</Error>

I have created key for Azure connectionstring in web.config file, written method for accessing azure storage blob making private to public:

public ActionResult BlobManager(string ContainerName = "images")
{
    string ConnectionString = ConfigurationManager.AppSettings["AzureStorageConnectionString"].ToString();
    CloudStorageAccount storageAccount = CloudStorageAccount.Parse(ConnectionString);
    CloudBlobClient cloudBlobClient = storageAccount.CreateCloudBlobClient();
    blobContainer = cloudBlobClient.GetContainerReference(ContainerName);

    //Make available to everyone
    blobContainer.SetPermissions(new BlobContainerPermissions{
        PublicAccess = BlobContainerPublicAccessType.Blob
        });
    }

This is my controller method:

[HttpGet]
public JsonResult GetImageList(int TaskID)
{
    var data = (from d in _context.ImgTable
                where (d.Taskid == TaskID )
                select new
                {
                    d.ImageID,
                    d.Taskid,
                    d.ImagePath,
                }).ToList();
    return Json(data, JsonRequestBehavior.AllowGet);
}

Please help out how to go further. I want to display images in in html page. I'm selecting Taskid from dropdownlist and on-click of it display related images to that taskid in html table.Below is the js function:

$.ajax({
        type: 'GET',
        url: '@Url.Action("GetImageList")',
        datatype: JSON,
        data: {
                'TaskID': $("#tasklist").val()                //getting selected TaskID from dropdown
        },
        success: function (data) {
                 var row_no = 1;
                 $.each(data, function (i, item) {
             
                 var path = "https://abcdatastorage.blob.core.windows.net/task/";     //azure storage url
                 var img = item.ImagePath;                                            //getting imagepath from local db
                     img = img.replace(/\s+/g, '%20');
                 var img1 = img.split('\\');
                     img = (path + img1[5]);                                          //joining above url to get complete url to bind with <img src>

            
                + "<td id='ItemId" + row_no + "' >" + item.ID + "</td>"               // displaying image id in html table

                "<td>"
                + "<div><img id='Image" + row_no + "' src=" + img + " class='img-fluid img-thumbnail' alt='' style='width:500px; height:350px;' />"  // display image for that imageid
                + "</div></td > "
     });

Can i pass directly the azure storage url in html? Can i access and dispaly images? If the azure storage is private, how the images will get display?

Below is the src i'm getting thru concatenating url as above written in js. But image is not seen.

<div>
    <img src='https://abcimages.blob.core.windows.net/images/418;1488163937486;d%20V%20Phase%205.0%20kV.jpg' class='img-fluid img-thumbnail' alt='' style='width:500px; height:350px;' />
</div>

Please help out with the solution. How can i access private azure storage through code and the images can be displyed.

Can you please guide me for this question i have raised is bit similar as this question, but require new approach: https://stackoverflow.com/questions/64304969/how-to-display-images-in-cshtml-page-after-joining-two-path-and-converting-to-ba — SDM, Oct 12 '20 at 07:06
https://stackoverflow.com/questions/64304969/how-to-display-images-in-cshtml-page-after-joining-two-path-and-converting-to-ba. Please refer — SDM, Oct 12 '20 at 07:10

score 0 · Accepted Answer · answered Oct 02 '20 at 02:59

I have a simple way to implement this function, and your code does not need to be modified a lot.

My suggestion is that you write a general GetAccountSASToken method. If you need security verification, it is recommended to call this method after passing the verification, so that the generated sas token can be generated and appended to the img URL.

You can read offical document Create an account SAS with .NET.

static void Main(string[] args)
{
    Console.WriteLine("Hello World!");
    Console.WriteLine(GetAccountSASToken());
}
public static string GetAccountSASToken()
{
    // To create the account SAS, you need to use Shared Key credentials. Modify for your account.
    const string ConnectionString = "DefaultEndpointsProtocol=**fix=core.windows.net";
    CloudStorageAccount storageAccount = CloudStorageAccount.Parse(ConnectionString);

    // Create a new access policy for the account.
    SharedAccessAccountPolicy policy = new SharedAccessAccountPolicy()
    {
        Permissions = SharedAccessAccountPermissions.Read | SharedAccessAccountPermissions.Write | SharedAccessAccountPermissions.List,
        Services = SharedAccessAccountServices.Blob | SharedAccessAccountServices.File,
        ResourceTypes = SharedAccessAccountResourceTypes.Service | SharedAccessAccountResourceTypes.Container | SharedAccessAccountResourceTypes.Object,
        SharedAccessExpiryTime = DateTime.UtcNow.AddHours(24),
        Protocols = SharedAccessProtocol.HttpsOnly
    };

    // Return the SAS token.
    return storageAccount.GetSharedAccessSignature(policy);
}

How to display images in .cshtml page from Private Azure Storage in MVC?

1 Answers1

Linked