How do I get my images to show up in my React component?

At the moment my images arent showing up. Only the broken icon image is showing the its place. Ive created a separate component for my image gallery so it may be something to do with that? My images are in a separate data file. Below is my image gallery component, my app, my product page where the image gallery is imported and images from a single product from my data file. Any help would be much appreciated.

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.image} alt={product.prod.name} 
   />
  <div className="image-preview">
  <img src={product.prod.image2} alt={product.prod.name}className="image-active" />
  <img src={product.prod.image3} alt={product.prod.name}/>

  <br />

 </div>

  </div>


  );
   }

my app

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import React, { useState } from 'react';
import productsData  from './data/products.json';
import postsData  from './data/posts.json';
import { FaTwitterSquare }  from 'react-icons/fa';
import './App.css';
import Shop from './Shop';
import AddToCart from './Components/AddToCart';
import Homepage from './Homepage';
import Accessories from './Accessories';
import Fashion from './Fashion';
import Footwear from './Footwear';
import DigitalPhotographs from './DigitalPhotographs';
import Art from './Art';
import Jewellery from './Jewellery';
import About from './About';
import ContactUs from './ContactUs';
import Product from './Product';
import Blog from './Blog';
import Cart from './Cart';



function App() {

const [cart, setCart] = useState([]);
const [products, setProducts] = useState(productsData.productsData);
 const [posts, setPosts] = useState(postsData.postsData);


 const getCartTotal = () => {
  return cart.reduce(
  (sum, { quantity }) => sum + quantity,
  0
  );
  };
  return (

  <Router>
  <nav>
  <img src="images/Logo2.jpeg" alt="my logo" className="rounded" width="160px"/>
    <Link to="/"> Home </Link>
    <Link to="/Shop"> Shop </Link>
    <Link to="/Blog"> Blog </Link>
    <Link to="/About"> About </Link>
    <Link to="/ContactUs"> Contact Us </Link>
    <Link to="/Shop"><button type="button">Shop</button></Link>
    <Link to="/Cart"><button type="button">Go To Cart({getCartTotal()})</button>. 
     </Link>


    </nav>
    <Routes>

    <Route exact path="/Shop" element={<Shop products={products} cart={cart} setCart= 
    {setCart}/>} />
    <Route path="/Blog" element={<Blog posts={posts}/>} />
    <Route path="/About" element={<About />} />
    <Route path="/ContactUs" element={<ContactUs />} />
    <Route path="/Cart" element={<Cart products={products} cart={cart} setCart=. 
     {setCart}/>} />
    <Route path="/Product/:id" element={<Product products={products} cart={cart} 
     setCart={setCart}/>} />
    <Route path="/Cart/:id" element={<Product products={products} cart={cart} 
    setCart={setCart}/>}/>
    <Route exact path="/Accessories" element={<Accessories products={products}/>} />
    <Route exact path="/Art" element={<Art products={products} />} />
    <Route exact path="/DigitalPhotographs" element={<DigitalPhotographs products=. 
    {products} />} />
    <Route exact path="/Fashion" element={<Fashion products={products} />} />
    <Route exact path="/Footwear" element={<Footwear products={products} />} />
    <Route exact path="/Jewellery" element={<Jewellery products={products} />} />
    <Route exact path="/" element={<Homepage />} />


      </Routes>


  <nav>
  <h4>Purchasing Info</h4>
    <Link to="/"> Returns </Link>
    <Link to="/Shop"> Delivery Info </Link>
    <h4>Contact &amp; Questions</h4>
    <Link to="/Blog"> Contact Us </Link>
    <Link to="/About"> FAQ </Link>
      <h4>Social</h4>

      <a href="https://twitter.com/luminousbutter" target="_blank" rel="noreferrer">  
    <img src="images/twitter-icon.jpg" alt="my logo" className="rounded" 
    width="60px"></img></a>

  </nav>
</Router>


  );
  }

export default App;

my single product page

import React, { useState } from 'react';
import './Product.css';
import ImageGallery from './Components/ImageGallery';
import AddToCart from './Components/AddToCart';
import { BrowserRouter as Router, Routes, Route, Link, useParams } from "react- 
router-dom";

 export default function Product({products, cart, setCart}){
 const { id } = useParams();

 const product = products.find(product => product.id === id);

 const getCartTotal = () => {
 return cart.reduce(
 (sum, { quantity }) => sum + quantity,
 0
 );
 };


 return (
  <>
  <h1>Product Page</h1>

  <div className="products">
    <h1>Product Page</h1>
  <div className="product">
      <h3>{product.name}</h3>
      <h4>£{product.cost}</h4>
      <p>{product.description}</p>
      <br />
      <AddToCart product={product} cart={cart} setCart={setCart}/>
      <ImageGallery prod ={product} />
    </div>
    </div>


   </>
  );
  }

and finally my product data where my images are stored

{
 "productsData" :
 [
  {
  "id": "0001",
  "category": "ART",
  "name": "Original David Bowie Mug Shot Mixed Media Framed Artwork",
  "cost": 200,
  "image":"images/bowiebig.jpeg",
  "image2": "images/bowiesmall.jpeg",
  "image3":"images/bowie2small.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"

  },
  ]}