我在聊天中发送的消息显示，但文件不显示

Question

我正在使用 Laravel 和 ReactJS 开发一个聊天应用程序。我可以发送消息和文件。但是，当我发送文件时，仅显示文件的路径。如何查看文件的小预览？预先感谢您的帮助。

我在此组件中查看我的文件和消息。

class Message extends React.Component {
    static contextType = ChatContext;

    constructor(props) {
        super(props);

        this.state = {
            message: (this.props.message !== undefined ? this.props.message : ""),
            is_me: false
        };
    }

    render() {
        const { session } = this.context;
        const { message } = this.state;

        let date = "";
        let is_me = false;
        if (message.from.id === session.id) {
            is_me = true;
        }
        if (message.created_at) {
            date = moment(message.created_at).fromNow();
        }


        if(message.data !== null && JSON.parse(message.data) !== undefined){
            var data = JSON.parse(message.data);
            message.message = ("<img src='"+data.file_path+' style="max-size:100px;"/>' ?? data.file_path);
        }


        return (
            <div className={`chat ${is_me ? 'is-me' : 'is-you' }`}>
                {is_me ? null:(
                <div className="chat-avatar">
                    <div className="user-avatar bg-purple">
                        <span>{message.from.name.charAt(0)}{message.from.surname.charAt(0)}</span>
                    </div>
                </div>
                )}
                <div className="chat-content">
                    <div className="chat-bubbles">
                        <div className="chat-bubble">
                            <div className="chat-msg">{message.message}</div>
                        </div>
                    </div>
                    <ul className="chat-meta">
                        <li>{message.from.name}</li>
                        <li>{date}</li>
                        {!is_me ? null: (
                        <li>{Lang.get('agent.seen')}</li>
                        )}
                    </ul>
                </div>
            </div>
        );
    }
}

我的组件是这样的。提交的文件看起来像这样的“