en otras partes he cargado imágenes desde el ordenador para renderizarla sin problema en un <img/>
y una src
obtenida de un File
con URL.createObjectURL()
, lo de siempre.
Ahora, estoy obteniendo Blobs
de Firebase, y uso el mismo método URL.createObjectURL()
para hacer la URL para el src del .
Este es el momento en que renderizo la imagen:
previewImages ? (
<img
key={'preview-img' + i}
style={{ maxWidth: 200, height: 'auto', marginLeft: 16 }}
src={previewImages[0]}
alt={'preview-description-image' + i}
/>
) : (
<Skeleton
key={'skeleton-image' + i}
style={{ marginLeft: 16 }}
animation='wave'
width={200}
height={200}
/>
Y así obtengo los Blobs, que he confirmado que existen y que son devueltos por Firebase correctamente:
const handleDownloadImagesFromFirebase = () => {
const imgPaths = answers.filter(
(answer) => typeof answer.desc === 'object'
);
downloadImagesFirebase(imgPaths)
.then((URLs) => {
return Promise.all(
URLs.map((URL) =>
fetch(URL, {
method: 'GET'
})
)
);
})
.then((responses) => {
return Promise.all(
responses.map((response) => new Response(response).blob())
);
})
.then((blobImgs) => {
//const imgPathsCopy = [...imgPaths];
const objURLs = blobImgs.map((blobImg) => {
return URL.createObjectURL(blobImg);
});
console.log(objURLs);
setPreviewImages(objURLs);
})
.catch((err) => {
console.log(err);
handleOpenSnackbar(
'error',
'Error obteniendo imágenes. Revise su conexión y vuelva a intentarlo. Actualice su página o reabra las respuestas.'
);
});
};
Algo engorroso pero funciona, ahí pueden ver el setPreviewImages(). Efectivamente aparece el Skeleton cuando el arreglo es nulo, este es el state inicialmente:
const [previewImages, setPreviewImages] = useState(null);
Ahí está el Skeleton mientras se obtienen las imágenes:
Ahora fijense en lo que me muestra (cuando están cargadas las imágenes en previewImages):
Eso de Texto es solo una opción que está correcta.
Aquí están los URL que se asignan en previewImages cuando se cargan de todas las promesas:
Ya intenté convertir el Blob en File, no funcionó, pero eso no debería ser el problema.