Tengo una función que se activa para recuperar una imagen de Firebase Storage:
import { getStorage, ref, getDownloadURL } from 'firebase/storage'; const storage = getStorage(); export async function getImage(location) { const ImageURL = await getDownloadURL(ref(storage, location)); return await ImageURL; }Esto luego se llama dentro de un componente React:
import { getImage } from 'API/Storage/getImage'; const EventPage = (props) => { return ( <div> <img src={getImage('image.jpg')} </div> ); } export default EventPage; Sin embargo, la imagen no se muestra y en su lugar muestra: <img src="[object Promise]" alt="Show Image">
¿Cuál es la mejor manera de resolver la promesa? El registro de ImageURL en la consola dentro de la función getImage devuelve la URL como se esperaba.
Tienes que esperar a que se resuelva la promesa. Puede obtener los datos en un useEffect y almacenar el valor en un useState .
He aquí un ejemplo básico:
import { getImage } from 'API/Storage/getImage'; const EventPage = (props) => { const [image, setImage] = useState(); useEffect(async () => { const image = await getImage('image.jpg'); setImage(image); }, []); return ( <div> {image ? <img src={image} /> : "Loading image"} </div> ); } export default EventPage; El useEffect en el ejemplo anterior no tiene en cuenta el caso en que su componente se desmonta mientras aún obtiene los datos. Una implementación que da cuenta de eso se ve así:
useEffect(() => { let wasUnmounted = false; getImage('image.jpg').then((image) => { if (wasUnmounted) return; setImage(image); }); return () => { wasUnmounted = true; }; }, []); Tenga en cuenta que la devolución de llamada proporcionada a useEffect no es async . Eso es porque las funciones async devuelven una promesa. Para poder detectar que el componente se desmontó, debemos devolver una devolución de llamada (se llamará cuando se desmonte el componente, debido a la matriz vacía pasada como segundo argumento). Lea más sobre useEffect aquí: https://reactjs.org/docs/hooks-reference.html#useeffect