求助：React中基于已有Image Blob URL创建新URL后无法显示图片

你的核心错误是把收到的Blob URL当成了原始二进制数据来处理。msg本身就是服务器返回的可用Blob URL，不需要再用它创建新Blob——你现在相当于把字符串形式的URL打包成了新Blob，生成的自然是无效的图片地址。

正确做法 #

直接使用收到的msg作为图片的src即可，不需要额外创建Blob和Object URL：

修正后的代码 #

useEffect(() => {
  const socketInstance = socket.current;
  if (socketInstance) {
    const handleMsgReceive = (msg) => {
      // 直接用msg（Blob URL）作为图片地址
      setArrivalMessage({ fromSelf: false, message: msg });
      console.log("收到的Blob URL:", msg);
    };
    socketInstance.on("msg-recieve", handleMsgReceive);

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      socketInstance.off("msg-recieve", handleMsgReceive);
    };
  }
  setNoImage(false);
}, []);

在img标签中使用 #

假设arrivalMessage.message存储的是Blob URL，直接绑定到src：

{arrivalMessage?.message && (
  <img src={arrivalMessage.message} alt="接收的图片" />
)}

额外注意事项 #

如果之后你需要处理原始二进制Blob数据（比如服务器直接发二进制流），才需要用new Blob()和URL.createObjectURL()，但这种情况要记得在组件卸载或不再使用图片时，调用URL.revokeObjectURL()释放内存，避免内存泄漏：

// 示例：处理二进制数据的情况
const RecieveBlob = new Blob([binaryMsg], { type: 'image/jpeg' });
const RecieveImageURL = URL.createObjectURL(RecieveBlob);
// ...使用URL后，记得在合适时机清理
URL.revokeObjectURL(RecieveImageURL);

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