按钮onClick打开所有图像预览，而不是一个

<button id="previewButton">预览图像</button>
<div id="imagePreview"></div>

document.getElementById('previewButton').addEventListener('click', function() {
    // 假设我们有一个图像数组
    const images = [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg'
    ];

    // 获取预览容器
    const previewContainer = document.getElementById('imagePreview');

    // 清空之前的预览
    previewContainer.innerHTML = '';

    // 显示当前点击的图像
    const currentImage = images[0]; // 这里可以根据实际情况获取当前点击的图像索引
    const imgElement = document.createElement('img');
    imgElement.src = currentImage;
    previewContainer.appendChild(imgElement);
});

import React, { useState } from 'react';

function ImagePreview() {
    const [previewImage, setPreviewImage] = useState(null);
    const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

    const handlePreview = () => {
        setPreviewImage(images[0]); // 这里可以根据实际情况获取当前点击的图像索引
    };

    return (
        <div>
            <button onClick={handlePreview}>预览图像</button>
            {previewImage && <img src={previewImage} alt="Preview" />}
        </div>
    );
}

export default ImagePreview;