图片网络预览正常但response.data乱码，React+Node.js无法显示

核心原因 #

你的前端代码错误地将图片的原始二进制数据（被解析为乱码字符串）直接赋值给img的src属性，而src需要的是图片的访问URL或者Data URL格式的字符串，不是原始的图片内容。

方案一：直接使用图片URL（最简单高效） #

既然后端已经通过express.static托管了/uploads目录，完全不需要通过API请求获取图片数据，直接拼接图片的访问地址给src即可：

const myProfile = () => {
  const { user } = useUser();
  const [foto, setFoto] = useState(PlaceholderPicture);

  useEffect(() => {
    if (user) {
      // 直接拼接图片的访问URL
      setFoto(`/uploads/${user.id}/user-pf.png`);
    }
  }, [user]);

  // ...

  <img
    className="my-picture"
    src={foto}
    alt="Profile"
    // 可选：加载失败时显示占位图
    onError={(e) => { e.target.src = PlaceholderPicture; }}
  />

方案二：通过API请求并转换为Data URL（仅特殊场景使用） #

如果必须通过API请求获取图片（比如需要权限验证），需要修改请求的responseType为blob，再将Blob转换为Data URL：

前端修改： #

import api from '../../service';
const myProfile = () => {
  const { user } = useUser();
  const [foto, setFoto] = useState(PlaceholderPicture);

  useEffect(() => {
    if (user) {
      api
        .get(`/uploads/${user.id}/user-pf.png`, {
          // 关键：设置响应类型为blob
          responseType: 'blob'
        })
        .then((response) => {
          // 将Blob转换为Data URL
          const imageUrl = URL.createObjectURL(response.data);
          setFoto(imageUrl);
        })
        .catch((error) => {
          console.error('Error fetching image:', error);
          // 出错时回退到占位图
          setFoto(PlaceholderPicture);
        });
    }
  }, [user]);

  // 组件卸载时释放URL对象，避免内存泄漏
  useEffect(() => {
    return () => {
      if (foto !== PlaceholderPicture) {
        URL.revokeObjectURL(foto);
      }
    };
  }, [foto]);

  // ...

  <img
    className="my-picture"
    src={foto}
    alt="Profile"
  />

验证后端配置 #

确认uploads目录结构正确：比如uploads文件夹和Node.js入口文件的相对路径无误，{userid}子目录下确实存在user-pf.png文件。可以直接在浏览器地址栏访问http://你的域名/uploads/用户ID/user-pf.png，如果能正常显示图片，说明后端配置没有问题。

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