Laravel+React聊天应用图片发送不显示/失真问题求助

我正在开发基于Laravel和React的聊天应用，在实现图片发送功能时，遇到发送的图片无法显示或失真的问题，已排查许久仍未解决。

技术实现流程 #

• 后端（Laravel）：通过uploadFile方法接收文件，将文件存储到服务器后，把文件信息存入MessageLog的data字段，并广播AgentFileEvent
• 前端（React）：用FormData封装文件，通过Axios发送请求；复用原本处理文本消息的addMessage方法处理图片消息；通过openChat监听事件加载消息，使用MessageSender组件发送消息/图片，Message组件负责渲染消息与图片

核心代码片段 #

后端Laravel代码 #

// 文件上传与消息存储逻辑
public function uploadFile(Request $request)
{
    $file = $request->file('file');
    $storagePath = $file->store('chat-images', 'public');
    
    $messageLog = MessageLog::create([
        'conversation_id' => $request->input('conversation_id'),
        'data' => json_encode([
            'path' => $storagePath,
            'original_name' => $file->getClientOriginalName()
        ]),
        'type' => 'image'
    ]);

    broadcast(new AgentFileEvent($messageLog))->toOthers();
    return response()->json(['status' => 'success', 'message' => $messageLog]);
}

前端React代码 #

图片发送逻辑

// MessageSender组件内的上传处理
const handleImageSelect = (e) => {
    const selectedFile = e.target.files[0];
    if (!selectedFile) return;

    const formData = new FormData();
    formData.append('file', selectedFile);
    formData.append('conversation_id', currentConversationId);

    // 复用文本消息的addMessage方法
    addMessage(formData, 'image');
};

// 通用消息发送方法
const addMessage = async (payload, messageType = 'text') => {
    try {
        const headers = messageType === 'image' 
            ? { 'Content-Type': 'multipart/form-data' } 
            : {};
        
        const res = await axios.post('/api/chat/upload-file', payload, { headers });
        // 本地临时渲染消息逻辑...
    } catch (err) {
        console.error('消息发送失败:', err);
    }
};

消息渲染逻辑

// Message组件渲染图片
const Message = ({ item }) => {
    if (item.type !== 'image') {
        return <div className="text-message">{item.content}</div>;
    }

    const imageData = JSON.parse(item.data);
    return (
        <div className="image-message">
            <img 
                src={`/storage/${imageData.path}`} 
                alt={imageData.original_name}
                className="chat-image"
            />
        </div>
    );
};

问题表现截图 #

[图片无法显示/失真截图]（描述：图片显示为破碎图标，或加载后颜色、尺寸出现异常）

已排查项 #

• 确认文件已成功上传至服务器storage/app/public/chat-images目录
• 检查Laravel的public/storage软链接已正确创建
• 验证前端请求头Content-Type确实为multipart/form-data
• 确认MessageLog中存储的文件路径、文件名无误

求助需求 #

恳请协助排查图片无法显示或失真的具体原因，提供可落地的解决思路或方案。

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