Javascript - ReactJS - 以 ReadableStream 作为源显示图像

我有 PNG 图像作为 ReadableStream，我需要使用此 ReadableStream 作为源显示 html 元素 img。我应该将其转换为某种东西吗？或者我该怎么做？

谢谢你的答案

来自谷歌的docs https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api#example_fetching_images:

1. 获取回复的blob
2. 解决其Promise
3. 使用以下命令创建本地源URL.createObjectURL
4. 将其添加到您的文档（或更新状态）

这是一个例子

import React, { Component } from 'react'


function validateResponse(response) {
    if (!response.ok) {
        throw Error(response.statusText);
    }
    return response;
}

export default class componentName extends Component {

    state = {
        src: null
    }

    componentDidMount() {
        fetch(`http://localhost:5000/api/images/home`)
            .then(validateResponse)
            .then(response => response.blob())
            .then(blob => {
                this.setState({ src: URL.createObjectURL(blob) })
            })

    }


    render() {
        return (
            <div>
                { this.state.src && <img alt="home" src={ this.state.src }></img> }
            </div>
        )
    }
}

就我而言，数据来自send_file来自一个的回应FlaskPython后端