Images Won't Load with Array in React-CodePudding

I've been trying to learn React over the past few weeks, and have decided to go through the LamaDev tutorial series. Yesterday I started with the portfolio tutorial (https://www.youtube.com/watch?v=hQjlM-8C4Ps&t=2798s) but have been stuck with trying to load images in my array.

I went ahead and built a component called 'Product' which the code can be found below. After that I followed the instructions and built the ProductList component which is suppose to show each of my products that are in my data.js file. I have gone and posted those below.

The problem I am running in to is that if I use a random img link from the internet the image gets imported into my product and show through my product list. However this is not what I am wanting to do since there are some images of my own I wanted to use.

When my Product.jsx tried to use a image I have saved in src/assets/img/ the img won't load. I tried using the require tag but it still is not working. I have also gone ahead and uploaded everything to my github page which can be found here and used as a reference.

I'm really not sure what I've done wrong here since everything looks right, but still know the issue is falling between the keyboard and the chair.

Thanks for any help

Product.jsx

import "./product.css";

const Product = ({ img, link }) => {
  return (
    <div className="p">
      <div className="p-browser">
        <div className="p-circle"></div>
        <div className="p-circle"></div>
        <div className="p-circle"></div>
      </div>
      <a href={link} target="_blank" rel="noreferrer">
        <img src={img} alt="" className="p-img" />
      </a>
    </div>
  );
};

export default Product;

ProductList.jsx

import Product from "../product/Product";
import "./productList.css";
import { products } from "../../data";

const ProductList = () => {
  return (
    <div className="pl">
      <div className="pl-texts">
        <h1 className="pl-title">Create & inspire. It's Jon</h1>
        <p className="pl-desc">
          Jon Snow is a creative portfolio that your work has been waiting for.
          Beautiful homes, stunning portfolio styles & a whole lot more awaits
          inside.
        </p>
      </div>
      <div className="pl-list">
        {products.map((item) => (
          // console.log(item)
          <Product key={item.id} img={item.img} link={item.link} />
        ))}
      </div>
    </div>
  );
};

export default ProductList;

data.js

export const products = [
  {
    id: 1,
    img: require("./assets/img/theBestTestSite.jpg"),
    link: "http://google.com",
  },
  {
    id: 2,
    img: require("./assets/img/theBestTestSite.jpg"),
    link: "http://google.com",
  },
  {
    id: 3,
    img: require("./assets/img/theBestTestSite.jpg"),
    link: "http://google.com",
  },
];

CodePudding user response：

In data.js try to import images first instead of require

import img1 from "./assets/img/theBestTestSite.jpg"

export const products = [
  {
    id: 1,
    img: img1,
    link: "http://google.com",
  },
  // and same for others
];