ReactJS问题渲染从MongoDB检索的二进制图像

Question

您好，所以我在MongoDB数据库中有图像，我正在尝试将其渲染到客户端，但是它不起作用。我将Buffer Unit8数据转换为base64，这样我就可以渲染它可以正常工作并存储在图像状态中，但是关联数组无法访问图像。

 useEffect( () => {
        const getAllDoctors = async () => {
            const result = await api.get('doctor/all')
            const myImages = []
            setDoctors(result.data)
            await result.data.forEach(async doctor => {
                myImages[doctor._id] = await base64_arraybuffer(doctor.photo.data.data)
            })
            setImages(myImages)
            setLoading(false)
        }
        getAllDoctors()

    }, [])

至于渲染

return (
        <div>
            {
                images.map((image, key) => {
                    console.log(doctors)
                    return (
                        <div key={key}>
                            <img alt={'image'} src={`data:image/png; base64, ${image}`}/>
                            <div>{`Doctor + ${images}`}</div>
                        </div>
                    )
                })
            }
        </div>
    );

转换器（不是我的）：

const base64_arraybuffer = async (data) => {
        const base64url = await new Promise((r) => {
            const reader = new FileReader()
            reader.onload = () => r(reader.result)
            reader.readAsDataURL(new Blob([data]))
        })

        return base64url.split(",", 2)[1]
    }

Answer 1

两件事

• 您的数组分配没有意义。如果_id是一个ID字符串，则使用字符串来键入数组，该键分配的数据不会包含在循环中。使用array.prototype.push将项目添加到下一个可用索引中。

• array.prototype.foreach < / code>和async /等待由于回调的性质而不会一起玩。尝试使用传统循环。

  


useEffect(() => {
  const getAllDoctors = async () => {
    const result = await api.get("doctor/all");
    const myImages = [];
    setDoctors(result.data);
    
    for (const doctor of result.data) {
      const image = await base64_arraybuffer(doctor.photo.data.data);
      myImages.push(image)
    }
    
    setImages(myImages);
    setLoading(false);
  };
  getAllDoctors();
}, []);