如何在MVC的私有Azure存储中的.cshtml页面中显示图像？

debugcn 发表于 Dev

人力资源

在检查html页面时出现以下错误：

<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>

我已经在web.config文件中为Azure连接字符串创建了密钥，该方法用于访问对私有私有的Azure存储Blob的书面方法：

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

这是我的控制器方法：

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

请帮助进一步。我想在html页面中显示图像。我从下拉列表中选择Taskid，然后单击它在html表中显示与该taskid相关的图像。下面是js函数：

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

我可以直接在html中传递azure存储网址吗？我可以访问和显示图像吗？如果天蓝色存储是私有的，如何显示图像？

下面是我通过串联用js写的url的src。但是看不到图像。

<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>

请协助解决。如何通过代码访问私有天蓝色存储，并且可以显示图像。

潘杰森

我有一个实现此功能的简单方法，您的代码不需要大量修改。

我的建议是您编写一个通用GetAccountSASToken方法。如果需要安全性验证，建议在通过验证后调用此方法，以便sas token可以生成生成的并将其附加到img URL。

您可以阅读官方文档“使用.NET创建帐户SAS”。

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