React.js中如何从Firebase Storage获取可正常显示的img_url

核心错误原因 #

你出现[object%20Object]报错的根本原因是img标签的src属性写了两层大括号：{{imgUrl}}。React 里给组件属性传递变量仅需要一层大括号，两层大括号等价于你传入了一个结构为{imgUrl: 你的图片地址}的对象，对象转成字符串之后就会变成[object Object]，经过URL编码后就是你看到的报错内容。

修复&优化点 #

• 把img标签的src属性从{{imgUrl}}改为{imgUrl}，直接传递状态变量即可
• 给useEffect添加空依赖数组，避免组件每次渲染都重复触发Firebase Storage请求，仅在组件挂载时请求一次即可
• 删除无用的全局变量img_urla，你已经通过useState存储了图片地址，这个变量既没有用到也容易引发数据不一致问题
• 增加请求异常捕获逻辑，避免下载地址失败导致组件报错，同时给图片添加alt属性提升可访问性
• 可选添加加载状态，图片加载完成前可以显示占位内容提升体验

优化后代码示例 #

import { useState, useEffect } from 'react';

const Apple = (props) => {
  const [imgUrl, setImgUrl] = useState("");
  const [imgLoading, setImgLoading] = useState(true);

  const getImage = async () => {
    try {
      const ref = storage.ref().child('/images/thumbs/super_potato.jpeg');
      const url = await ref.getDownloadURL();
      setImgUrl(url);
    } catch (err) {
      console.error('图片地址获取失败：', err);
    } finally {
      setImgLoading(false);
    }
  }

  useEffect(() => {
    getImage();
  }, []); // 空依赖保证仅挂载时执行一次

  const { board, state } = props;
  if (!board) return null;

  return (
    <div className="container section project-details">
      <p>{board.content}</p>
      {imgLoading ? (
        <span>图片加载中...</span>
      ) : (
        imgUrl && <img src={imgUrl} alt="缩略图" />
      )}
    </div>
  )
}

内容的提问来源于stack exchange，提问作者user14232549