如何让我的画廊在 React 中移动图像？

Question

我的图片都显示在我的图片库中，但是当我尝试单击另一张图片以查看它的大版本时，它不起作用。 我在做什么错？ 下面是我的图片库和图片文件路径所在的 JSON 数据文件。 提前致谢

import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useParams } from "react- 
router-dom";

export default function ImageGallery(prod) {


const product=prod


const highlight = document.querySelector (".gallery-highlight");
const previews = document.querySelectorAll (".image-preview img");


previews.forEach(preview => {
preview.addEventListener("click", function() {
const smallSrc = this.src;
const bigSrc = smallSrc.replace ("small", "big");
previews.forEach(preview => preview.classList.remove("image-active"));
highlight.src = bigSrc;
preview.classList.add("image-active");
});
});


 return (

<div className="image-gallery">
    <img className="gallery-highlight" src={product.prod.image1} alt=. 
{product.prod.name} />
<div className="image-preview">
  <img src={product.prod.image1} alt={product.prod.name}className="image-active" />
    <img src={product.prod.image2} alt={product.prod.name}/>


    <br />
</div>
</div>


);
}

和我的 JSON 文件的片段

 {
"productsData" :
 [
  {
  "id": "0001",
  "category": "ART",
  "name": "Original David Bowie Mug Shot Mixed Media Framed Artwork",
  "cost": 200,
  "quantity": 1,
  "image1":"/images/bowie-big.jpeg",
  "image2":"/images/bowie2-small.jpeg",
  "description": "Original David Bowie Mug Shot Mixed Media Framed Artwork floral 
  painting on wooden canvas with an original pop art style David Bowie Mugshot on top 
  painting is framed with a red baroque style frame including the words deadly 
  flowers bloom around frame"

},
   ]}

Answer 1

全屏预览图像的最佳方法之一是为其提供 aa href

<a href="/imageLink" target="_blank"><img src={}.../></a>