How to display image downloaded from Azure Blob Storage in React

Question

First of all, Ive checked this question and it's not a duplicate How to display an image saved as blob in React

I'm not sure what they're doing, but our code is entirely different.

I have been following Azure's documentation on downloading files from blob storage via React: https://docs.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

Here is my component did mount, where I'm downloading the images from my blob storage container.

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

When I console.log downloaded, which is the string version of the image, this is what I see:

Chrome says it's a 1.1 mb string, so I'm sure it's the entire image.

I know that this is not a valid image src because the screen is entirely blank and the image being pulled from blob storage is not a white picture. (There is no doubt that mounted is being set correctly, I'm actually running this image through a custom component which is also registering that the image source is invalid, and you'll just have to believe that I'm passing the source correctly to this component)

Any idea how I can create a valid image source from this convoluted string Azure has produced?

edit:

unfortunately, whatever this blob is, is still not registering as a valid image source. my code is a little bit different because I was getting this error (Failed to execute 'createObjectURL' on 'URL':) so I followed the instructions there.

This also does not work:

Answer 1

The Azure SDK documentation example just show how you would consume the downloaded Blob as a string using blobToString() (assuming the blob is text). In your case you don't need do convert it to string. Could you please try

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

Edited: Not sure what you are missing. but I just tried, and this simple page shows the downloaded image correctly.

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