Estoy intentando recuperar y mostrar imágenes de S3 usando una URL firmada. Puedo registrar la URL firmada en la consola, hacer clic en ella y descargará la imagen localmente. La imagen descargada no está dañada de ninguna manera.

: Jerarquía de componentes

 App - Maps -- Map

El componente de la aplicación administra el filtrado de mapas, el estado de los mapas filtrados luego se pasa al componente de mapas que representa dinámicamente los componentes del mapa .

 export default function Maps({ maps }) { return ( <Carousel autoPlay={false} PrevIcon={<ArrowCircleLeftIcon fontSize='large' />} NextIcon={<ArrowCircleRightIcon fontSize='large' />} > {maps.map((map, i) => ( <Map key={i} map={map} /> ))} </Carousel> ) }

El componente My Map contiene el estado que contiene la URL de la imagen de Maps y un enlace useEffect que llama a una función getImg .

 export default function Map({ map }) { const [mapImg, setMapImg] = useState(null) useEffect(() => { if (map.uri) { getImg(map.uri).then((res) => { console.log(res) setMapImg(res) }) } }, [map.uri]) return ( <CardMedia component='img' alt='random nature' height='550' image={mapImg} /> )

Finalmente, la función getImg .

 export const getImg = (uri) => { const uriToS3Path = (uri) => { let path = uri.substring(0, 6) const file = uri.substring(6) + '.TIF' path = path.split('').join('/') + '/' return path + file } const filePath = uriToS3Path(uri) return Storage.get(filePath, { contentType: 'image/tiff' }) }

No se deje confundir por map.uri , básicamente esta propiedad determina la clave para el objeto S3, por lo tanto, la función uriToS3Path como se indicó anteriormente. No recibo ningún error de depuración, puedo recuperar el enlace pero la imagen no se muestra. ¿Se debe a alguna actividad asincrónica o se debe modificar todo el enfoque de búsqueda?

Muchas gracias.

Actualización: inspección de la pestaña Aplicación dentro de la consola del desarrollador. Puede ver que la imagen S3 aparece en la lista (92.TIF), pero la vista previa está rota.