将图像添加到模态ReactJS

npm install react-modal

import React, { useState } from 'react';
import Modal from 'react-modal';
import image from './image.jpg'; // 替换为实际的图像文件路径

// 设置模态框的样式
const modalStyle = {
  overlay: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
  },
  content: {
    width: '400px',
    height: '400px',
    margin: 'auto',
    border: 'none',
    borderRadius: '4px',
    padding: '20px'
  }
};

// 创建React组件
const App = () => {
  const [modalIsOpen, setModalIsOpen] = useState(false);

  // 打开模态框
  const openModal = () => {
    setModalIsOpen(true);
  };

  // 关闭模态框
  const closeModal = () => {
    setModalIsOpen(false);
  };

  return (
    <div>
      <button onClick={openModal}>打开模态框</button>
      <Modal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
        style={modalStyle}
      >
        <img src={image} alt="图像" />
      </Modal>
    </div>
  );
};

export default App;