如何使用 url 读取存储在 Azure 存储中的图像答案

【问题标题】：How to read image stored in azure storage by using url如何使用 url 读取存储在 Azure 存储中的图像
【发布时间】：2021-02-17 16:18:26
【问题描述】：

我使用 azure blobclientservice 上传图片，如下所示

 let fr = new FileReader();

  let result = {};

  fr.onload = async function () {
    var data = fr.result;

    await blockBlobClient
      .uploadData(data, {
        concurrency: 20,
        blobHTTPHeaders: {
          blobContentType: photo.type,
        },
      })
      .then((res) => {
        result = res;
        console.log(res);
      })
      .catch((error) => {
        console.log(error);
        result.error = true;
      });
  };
  fr.readAsArrayBuffer(photo);

我成功地从响应中获取了 url。我希望将此 url 用作 html 中图像标记中的 src，而不是从存储中下载所有数据。但它不显示图像，我只能看到 alt 而不是图像。我认为当图像作为公共存储在 aws s3 存储桶中时，可以使用 url 来读取图像。我希望在天蓝色存储中具有相同的功能。可能吗？如果有人帮助我，我将不胜感激。

【问题讨论】：

标签： file-upload azure-storage image-rendering

【解决方案1】：

您的图片应该能够显示在您的页面上：

<img src="the_url_of your_image">

当您的图像 blob 公开时，您可以使用 Blob URL(https://{storage-name}.blob.core.windows.net/{container-name}/{test.png}) 访问 blob。

如果访问级别是私有的，您可以使用SAS 访问图像 blob。 URL 看起来像https://{storage-name}.blob.core.windows.net/{container-name}/{test.png}?{Blob SAS token}。

尝试使用generateBlobSASQueryParameters 生成 Blob SAS 令牌。

// Generate service level SAS for a blob
const blobSAS = generateBlobSASQueryParameters({
    containerName, // Required
    blobName, // Required
    permissions: BlobSASPermissions.parse("racwd"), // Required
    startsOn: new Date(), // Optional
    expiresOn: new Date(new Date().valueOf() + 86400), // Required. Date type
    cacheControl: "cache-control-override", // Optional
    contentDisposition: "content-disposition-override", // Optional
    contentEncoding: "content-encoding-override", // Optional
    contentLanguage: "content-language-override", // Optional
    contentType: "content-type-override", // Optional
    ipRange: { start: "0.0.0.0", end: "255.255.255.255" }, // Optional
    protocol: SASProtocol.HttpsAndHttp, // Optional
    version: "2016-05-31" // Optional
  },
  sharedKeyCredential // StorageSharedKeyCredential - `new StorageSharedKeyCredential(account, accountKey)`
).toString();

【讨论】：