如何显示来自Firestore URL的图像

import React, { useEffect, useState } from 'react';
import firebase from 'firebase/app';
import 'firebase/firestore';

const ImageComponent = () => {
  const [imageUrl, setImageUrl] = useState('');

  useEffect(() => {
    // 初始化Firebase
    firebase.initializeApp({
      // 在此处添加您的Firebase配置
    });

    // 获取图像URL
    const fetchImageUrl = async () => {
      const firestore = firebase.firestore();
      const imageRef = firestore.collection('images').doc('image1');
      const doc = await imageRef.get();
      const data = doc.data();
      setImageUrl(data.url);
    };

    fetchImageUrl();
  }, []);

  return (
    <div>
      {imageUrl && <img src={imageUrl} alt="Firestore Image" />}
    </div>
  );
};

export default ImageComponent;