图像未完全加载到客户端 React

Question

我在 expressjs 中有一个服务器，它从 FTP 服务器获取图像（Base64 字符串）。在我的 React 中，我获取数据并将字符串转换为图像。然后我想在我的网站上显示图像。但是，图像没有完全加载，我不明白为什么。

这是我获取数据的地方：

const handleDisplayImage = (e) => {
    e.preventDefault();
    console.log("Loading...");
    // Fetching a JSON file across the network from Reddit
    fetch("http://localhost:8000/ftpAPI").then(res => {
        if (res.status !== 200) {
           console.log("Something went wrong...");
           return;
        }
        res.json().then(data => {
            if (data !== null) {
                var img = document.createElement("img");
                img.src = "data:image/png;base64, " + data;
                var src = document.getElementById("header");
                setImage(img.src);
                setImageIsShown(true);
            }
        });
    });
}

这就是我显示图像的方式：

const Box = () => {
    return (
        <div>
            <h1> Images: </h1>
            <div style={{ display: loading ? "block" : "none" }}>
                <SpinningCircles></SpinningCircles>
            </div>
            <div style={{ display: loading ? "none" : "block" }}>
                <img
                    className="w-full"
                    src={image}
                    onLoad={() => setLoading(false)} />
            </div>
        </div>
    );
}

这是客户端的输出：

是否与我没有任何持续获取图像的功能或图像太大有关？但在那种情况下，它仍然应该在一段时间后完全加载，但事实并非如此。