如何使用reactjs从mongoDB中显示/渲染图像？

import React, { Component } from 'react';
import mongodb from 'mongodb';

class ImageDisplay extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imageUrl: ''
    };
  }

  componentDidMount() {
    // 连接到MongoDB数据库
    const MongoClient = mongodb.MongoClient;
    const url = 'mongodb://localhost:27017';
    const dbName = 'your_database_name';

    MongoClient.connect(url, (err, client) => {
      if (err) {
        console.log('Error occurred while connecting to MongoDB', err);
      } else {
        console.log('Connected successfully to MongoDB');

        const db = client.db(dbName);
        const collection = db.collection('your_collection_name');

        // 查询图像数据
        collection.findOne({}, (err, result) => {
          if (err) {
            console.log('Error occurred while querying MongoDB', err);
          } else {
            // 获取图像数据的URL或二进制数据
            const imageUrl = result.imageUrl;

            this.setState({ imageUrl });
          }
          client.close();
        });
      }
    });
  }

  render() {
    const { imageUrl } = this.state;

    return (
      <div>
        <img src={imageUrl} alt="Image" />
      </div>
    );
  }
}

export default ImageDisplay;