从Azure Blob容器显示图像

Question

我有一个Asp Mvc应用程序，我试图显示存储在Azure Blob存储中的图像。当我返回字符串时，浏览器只显示为破损的图像。当我右键单击并“检查”并单击生成的URI时，我会收到以下消息：“BlobNotFound – 指定的Blob不存在。RequestId：f7c32876-0001-013e-539d-dede28000000 Time：2016-07-15T13:30:49.7560775Z”。我已下载Azure Storage Explorer并可以查看文件。我尝试将容器上的访问级别从“无公共访问”更改为“仅读取Blob的访问权限”，但我认为我已在代码中使用该行“PublicAccess = BlobContainerPublicAccessType.Blob”进行了更改。如何显示存储中包含的图像？

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

修改

在进一步阅读之后，我已经更改了

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

这个更改返回了一个异常

异常详情：System.Net.WebException: 远程服务器返回错误：(404) 未找到。

我需要在上传时做些不同的事情吗？

编辑

@Gaurav Mantri

我看到它存储为application/octet-stream，但当我尝试将其更改为image/jpg时使用：

blockBlob.Properties.ContentType = "image/jpg";
    blockBlob.SetProperties();

我在设置属性时出现了404异常。当我拉取图片时，调试时可以看到图片名称与上传时的名称相同。

上传时我使用了以下代码：

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

- tony09uk

---

你在blob容器中看到一个名为PS-ICON-120x120_140.jpg的文件了吗？你能否通过Azure Storage Explorer分享一下它的截图？ - Gaurav Mantri

我已经尽力添加了足够的额外信息，如果需要更多，请告诉我。 - tony09uk

谢谢。我注意到了几件事情：1）在UploadFile中，您没有像在GetBlobInContainer函数中那样设置blob容器的ACL。您能否请检查一下blob容器的ACL确实是“Blob”而不是“Private”？2）实际上，您向GetBlobInContainer函数传递的blob名称与您在UploadFile中所做的不同。请确保两者相同。 - Gaurav Mantri

感谢您的第一条评论，我尝试了几件事情，其中之一是调用blockBlob.Properties.ContentType，但不要调用blockBlob.SetProperties(); 我没想到这会起作用，因为我认为blockBlob.SetProperties(); 保存设置。它已经起作用了，谢谢您的帮助。我将很乐意将您提供的任何相关答案标记为正确。 - tony09uk

我真的不确定我到底做了什么帮助你:P 但我很高兴听到你得到解封。请提供一个回答，告诉我们你做了什么。自己回答问题并接受它是完全可以的:)。 - Gaurav Mantri

Answer 1

多亏了Gaurav的评论，我才能解决我的问题。

我下载文件的代码如下：

CloudBlockBlob blockBlob = blobContainer.GetBlockBlobReference(fileName);
blockBlob.Properties.ContentType = "image/jpg";
blockBlob.SetProperties();
return blockBlob;

但是，当我存储文件时，没有设置内容类型，因此它被保存为 application/octet-stream，上述代码在调用文件时尝试转换类型。通过在上传之前设置类型，我能够简单地调用文件并将其显示为图像。

CloudBlockBlob blockBlob = blobContainer.GetBlockBlobReference("my-image-blob");
blockBlob.Properties.ContentType = "image/jpg";

using (var fileStream = System.IO.File.OpenRead(filePath))
{
    blockBlob.UploadFromStream(fileStream);
}

- tony09uk