Hola, tengo imágenes en una base de datos mongodb y estoy tratando de representarlas en el lado del cliente, sin embargo, no funciona. Convierto los datos de la unidad de búfer 8 en base64 para que pueda hacer que parezca que funciona y se almacenan en el estado de las imágenes, pero las imágenes no son accesibles mediante una matriz asociativa.
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() }, [])en cuanto al renderizado
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> );convertidor (no mio):
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] }Dos cosas
La forma en que se asigna la matriz no tiene sentido. Si _id es una cadena de identificación, entonces está utilizando una cadena para ingresar una matriz, los datos asignados en esa clave no se incluirán en los bucles. Utilice Array.prototype.push para agregar el elemento al siguiente índice disponible.
Array.prototype.forEach y async/await no funcionan bien juntos debido a la naturaleza de las devoluciones de llamada. Intente usar un bucle tradicional.
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(); }, []);