从 Reactjs 中的 Firebase 存储返回图像

Question

我有一个功能可以从 Firebase 存储中检索图像：

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;
}

然后在 React 组件中调用：

import { getImage } from 'API/Storage/getImage';

const EventPage = (props) => {
  return (
    <div>
      <img src={getImage('image.jpg')}
    </div>
  );
}

export default EventPage;

但是图像没有显示，而是显示：<img src="[object Promise]" alt="Show Image">

解决诺言的最佳方式是什么？ getImage 函数 returns 中的控制台日志记录 ImageURL 符合预期 URL。

Answer 1

您需要等待承诺解决。您可以在 useEffect and store the value in a useState.

中获取数据

这是一个基本示例：

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;

上例中的 useEffect 没有考虑到您的组件在卸载的同时仍在获取数据的情况。考虑到这一点的实现如下所示：

useEffect(() => {
  let wasUnmounted = false;
  getImage('image.jpg').then((image) => {
    if (wasUnmounted) return;
    setImage(image);
  });
  return () => {
    wasUnmounted = true;
  };
}, []);

请注意，提供给 useEffect 的回调不是 async。那是因为 async 实现了 return 一个承诺。为了能够检测到组件已卸载，我们需要 return 回调（它将在组件卸载时调用，因为空数组作为第二个参数传递）。请在此处阅读有关 useEffect 的更多信息：https://reactjs.org/docs/hooks-reference.html#useeffect

从 Reactjs 中的 Firebase 存储返回图像

Returning an image from Firebase storage within Reactjs

javascript

reactjs

firebase-storage