如何在React中显示从Azure Blob Storage下载的图像

Question

首先，我检查了这个问题，它不是一个重复的如何在React中显示保存为Blob的图像。

我不确定他们在做什么，但我们的代码完全不同。

我一直在按照Azure的文档使用React从Blob存储下载文件：https://learn.microsoft.com/en-us/javascript/api/overview/azure/storage-blob-readme?view=azure-node-latest#download-a-blob-and-convert-it-to-a-string-browsers 这是我的componentDidMount，在这里我正在从我的Blob存储容器下载图像。

    async function blobToString(blob) { // this is copy-pasted from Azure who provided this as a helper function
        const fileReader = new FileReader();
        return new Promise((resolve, reject) => {
            fileReader.onloadend = (ev) => {
                resolve(ev.target.result);
            };
            fileReader.onerror = reject;
            fileReader.readAsText(blob);
        });
    }

    useEffect(() => {
        async function fetchData() {
            if (!mounted) {
                console.log(images)
                setImages(images.map(async (image) => {
                    // console.log(image)
                    const blobClient = containerClient.getBlobClient(image.src);
                    let downloadBlockBlobResponse = await blobClient.download()
                    let downloaded = await blobToString(await downloadBlockBlobResponse.blobBody)
                    // console.log(downloaded)
                    image.src = URL.createObjectURL(downloadBlockBlobResponse);
                    return image;
                }));
                console.log(images)
                setMounted(true);
            }
        }
        fetchData();
    }, []);

    return (
        <>
            {mounted ? <>
                <img src={images[0].src} />
            </> : null}
        </>
    )

当我使用console.log输出downloaded，也就是图像的字符串版本时，我看到了以下内容：

Chrome浏览器显示这是一个1.1 MB的字符串，所以我确定这就是整个图片。 我知道这不是一个有效的图像src，因为屏幕完全是空白的，从blob存储中拉出的图片也不是白色的。（毫无疑问，mounted已经被正确设置，我实际上正在通过自定义组件运行此图像，该组件还注册了图像源无效，您只需相信我正确地传递了源代码给此组件）

您好，这是一段英语文本的中译结果：

您有什么想法可以从Azure生成的这个混乱的字符串创建有效的图像源吗？

编辑：

不幸的是，无论这个 blob 是什么，它仍然没有被注册为一个有效的图像来源。我的代码有点不同，因为我遇到了这个错误(Failed to execute 'createObjectURL' on 'URL':)，所以我按照那里的说明进行了操作。

这也不起作用：

- notacorn

Answer 1

Azure SDK文档示例仅展示了如何使用blobToString()将下载的Blob作为字符串消耗（假设Blob是文本）。在您的情况下，您不需要将其转换为字符串。请尝试一下。

const downloaded = await downloadBlockBlobResponse.blobBody;
image.src = URL.createObjectURL(downloaded);

编辑：不确定您缺少什么，但我刚刚尝试了一下，这个简单的页面可以正确显示下载的图像。

export default function Page(): JSX.Element {
  const [imgSrc, setImgSrc] = useState<string>("");
  useEffect(() => {
    async function fetchImage() {
      if (!downloaded) {
        if (imageUrl) {
          client = new BlockBlobClient(imageUrl);
          const response = await client.download();
          const blob = await response.blobBody;
          if (blob) {
            setImgSrc(URL.createObjectURL(blob));
            console.log("##### ", imgSrc);
          }
        }
        downloaded = true;
      }
    }
    fetchImage();
  }, [imgSrc]);

  return (
    <>
      <div className="jumbotron">
        <h1>Storage Blob Download Sample!</h1>
        <div className="alert alert-light">
          <h4 className="alert-heading">Image</h4>
          <div className="container">
            <img src={imgSrc} />
          </div>
        </div>
      </div>
    </>
  );
}

- Jeremy Meng

---

请参见下面的翻译：在帖子底部编辑： - notacorn

上面的答案已经编辑过了，并附有一个可行的示例。 - Jeremy Meng