如何在 React 中显示公共目录中的图像？

mysql

2024-06-14 22:37:01

如何在 React 前端显示存储在公共目录中的图像

问题

在 React 前端显示存储在公共目录中的图像时，可能会遇到以下问题：

获取上传图像名称 ：如何从后端获取上传图像的名称？
获取确切的时间戳 ：如何获取图像上传时的确切 Date.now() 时间戳？

解决方案

获取上传图像名称

在后端处理图像上传请求时，将图像名称存储到数据库中。
通过数据库查询获取图像名称。

获取确切的时间戳

在后端图像上传处理程序中，使用 Date.now() 获取确切的时间戳。

React 前端代码

使用 useEffect 钩子从数据库中获取图像名称。
使用 map 函数在前端显示图像。

示例代码

后端 Node.js

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    return cb(null, "./public/images");
  },
  filename: function (req, file, cb) {
    const filename = `${Date.now()}_${file.originalname}`;
    return cb(null, filename);
  },
});

const upload = multer({ storage });

// ...

app.post("/upload", upload.single("image"), async (req, res) => {
  // ...

  // Store the image filename in the database
  await db.query("INSERT INTO images (filename) VALUES (?)", [req.file.filename]);

  // ...
});

React 前端

import { useEffect, useState } from "react";

const ImageDisplay = () => {
  const [images, setImages] = useState([]);

  useEffect(() => {
    // Fetch image names from the database
    fetch("/api/images")
      .then(res => res.json())
      .then(data => setImages(data.images))
      .catch(err => console.error(err));
  }, []);

  return (
    <div>
      {images.map(image => (
        <img src={`/public/images/${image.filename}`} alt={image.filename} />
      ))}
    </div>
  );
};

export default ImageDisplay;