I have a function which goes off to retrieve an image from 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;
}
This is then called within a React component:
import { getImage } from 'API/Storage/getImage';
const EventPage = (props) => {
return (
<div>
<img src={getImage('image.jpg')}
</div>
);
}
export default EventPage;
However the image doesn’t display and instead shows: <img src="[object Promise]" alt="Show Image">
What’s the best way of resolving the promise? Console logging ImageURL
within the getImage
function returns the URL as expected.