javascript - 如何在React中显示从Azure Blob存储下载的图像

Question

首先，我检查过这个问题，它不是重复的How to display an image saved as blob in React

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

我一直在关注 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

这是我安装的组件，我正在其中从 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 下载(图像的字符串版本)时，我看到的是:

Chrome 说它是一个 1.1 mb 的字符串，所以我确定它是整个图像。

我知道这不是有效的图像src，因为屏幕完全空白，并且从 blob 存储中提取的图像不是白色图片。 (毫无疑问，mounted 设置正确，我实际上是通过自定义组件运行此图像，该组件还注册图像源无效，您只需相信我将源正确传递给该组件)

知道如何从 Azure 生成的这个复杂字符串创建有效的图像源吗？

编辑:

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

这也不起作用:

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