如何使我的图库在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

全屏预览图像的最好方法之一是给它一个href

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