如何使用Reactjs显示mongodb中的图像

npx create-react-app my-app
cd my-app

npm install mongodb

import { MongoClient } from 'mongodb';

const uri = 'mongodb://localhost:27017'; // MongoDB连接字符串
const dbName = 'mydatabase'; // 数据库名称

async function connectToMongoDB() {
  const client = new MongoClient(uri, { useUnifiedTopology: true });

  try {
    await client.connect();
    console.log('Connected to MongoDB');

    const db = client.db(dbName);

    // 在这里执行你的查询操作或其他操作

  } catch (err) {
    console.error('Error connecting to MongoDB', err);
  } finally {
    await client.close();
    console.log('Disconnected from MongoDB');
  }
}

connectToMongoDB();

import React, { useState, useEffect } from 'react';
import { MongoClient } from 'mongodb';

const uri = 'mongodb://localhost:27017'; // MongoDB连接字符串
const dbName = 'mydatabase'; // 数据库名称
const collectionName = 'images'; // 集合名称

function ImageGallery() {
  const [images, setImages] = useState([]);

  useEffect(() => {
    async function fetchImages() {
      const client = new MongoClient(uri, { useUnifiedTopology: true });

      try {
        await client.connect();
        console.log('Connected to MongoDB');

        const db = client.db(dbName);
        const collection = db.collection(collectionName);

        const result = await collection.find().toArray();
        setImages(result);

      } catch (err) {
        console.error('Error connecting to MongoDB', err);
      } finally {
        await client.close();
        console.log('Disconnected from MongoDB');
      }
    }

    fetchImages();
  }, []);

  return (
    <div>
      {images.map((image) => (
        <img src={image.url} alt={image.name} key={image._id} />
      ))}
    </div>
  );
}

export default ImageGallery;