如何基于给定代码在Antd Modal中展示API获取的数据库图片？

以下是修正原代码问题、实现页面加载获取图片并在Antd Modal中预览的完整代码：

import { useState, useEffect } from 'react';
import { Upload, Modal, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

const MyVehiclePage = (props) => {
  // 状态管理：已加载图片列表、预览弹窗状态、当前预览图地址、预览标题
  const [imageURLS, setImageURLS] = useState([]);
  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewImage, setPreviewImage] = useState('');
  const [previewTitle, setPreviewTitle] = useState('');
  // 上传组件相关状态（保留原逻辑）
  const [fileKeys, setFileKeys] = useState([]);

  // 页面加载时异步获取数据库图片
  useEffect(() => {
    const fetchImages = async () => {
      try {
        // 调用API获取图片URL数组（假设getAllMediaData为异步方法）
        const fetchedImages = await getAllMediaData();
        setImageURLS(fetchedImages);
      } catch (error) {
        console.error('获取图片失败:', error);
      }
    };
    fetchImages();
  }, []);

  // 处理上传组件的预览逻辑
  const handlePreview = (file) => {
    setPreviewImage(file.url || file.preview);
    setPreviewTitle(file.name || file.url?.substring(file.url.lastIndexOf('/') + 1) || '预览图');
    setPreviewOpen(true);
  };

  // 处理已加载图片的点击预览
  const handleStoredImagePreview = (imageUrl) => {
    setPreviewImage(imageUrl);
    setPreviewTitle(imageUrl.substring(imageUrl.lastIndexOf('/') + 1));
    setPreviewOpen(true);
  };

  // 关闭预览弹窗
  const handleCancel = () => setPreviewOpen(false);

  // 上传按钮（保留原逻辑）
  const uploadButton = (
    <div>
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>上传</div>
    </div>
  );

  // 上传相关逻辑（需自行实现原业务逻辑）
  const removeImage = () => { /* 原移除图片逻辑 */ };
  const handleUpload = () => { /* 原自定义上传逻辑 */ };

  return (
    <>
      <div className="uploadBtn">
        <Upload
          onRemove={removeImage}
          customRequest={handleUpload}
          listType="picture-card"
          onPreview={handlePreview}
          // 可选：将已加载图片加入上传组件的已选列表
          // fileList={imageURLS.map((url, idx) => ({
          //   uid: `stored_${idx}`,
          //   name: url.substring(url.lastIndexOf('/') + 1),
          //   url: url,
          // }))}
        >
          {fileKeys.length >= 10 ? null : uploadButton}
        </Upload>
      </div>

      {/* 展示从数据库获取的图片缩略图，点击可预览 */}
      <div style={{ marginTop: 20, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
        {imageURLS.map((item, idx) => (
          <div
            key={idx}
            style={{ width: 100, height: 100, cursor: 'pointer', borderRadius: 8, overflow: 'hidden' }}
            onClick={() => handleStoredImagePreview(item)}
          >
            <img
              alt="存储图片"
              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
              src={item}
            />
          </div>
        ))}
      </div>

      {/* 共用一个预览弹窗，根据当前预览图切换内容 */}
      <Modal
        open={previewOpen}
        title={previewTitle}
        footer={null}
        onCancel={handleCancel}
        width={800}
      >
        <img
          alt="预览图"
          style={{ width: '100%' }}
          src={previewImage}
        />
      </Modal>
    </>
  );
};

export default MyVehiclePage;

核心修改说明 #

• 状态修正：用useState声明imageURLS存储API返回的图片列表，解决原代码中局部变量无法在渲染层访问的问题；通过previewImage和previewOpen统一管理预览状态，避免循环渲染多个Modal。
• 异步API处理：将getAllMediaData包装在异步函数中，用await等待接口响应后更新状态，确保图片能正确加载渲染。
• 预览逻辑统一：分别处理上传组件的预览和已存储图片的点击预览，共用同一个Modal展示对应图片，减少冗余组件。
• 图片展示优化：新增缩略图展示区域，直观呈现已存储图片，点击即可触发预览。

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