图像不会在 React 中使用数组加载

Question

在过去的几周里，我一直在尝试学习React，并决定通过LamaDev教程系列。昨天我开始与投资组合教程(https://www.youtube.com/watch?v=hQjlM-8C4Ps&t=2798s)，但一直坚持尝试加载图像在我的数组。

我继续构建了一个名为"Product"的组件，其代码可以在下面找到。之后，我按照说明构建了ProductList组件，该组件应该显示我的data.js文件中的每个产品。我已经把它们贴在下面了。

我遇到的问题是，如果我从互联网上使用随机img链接，图像被导入到我的产品中，并通过我的产品列表显示。然而，这不是我想做的，因为有一些我自己的图像我想使用。

当我的产品。jsx试图使用我保存在src/assets/img/中的图像，img不会加载。我尝试使用要求标签，但它仍然不起作用。我也已经把所有的东西上传到我的github页面，可以在这里找到并用作参考。

我真的不确定我在这里做错了什么，因为一切看起来都是正确的，但我仍然知道问题落在键盘和椅子之间。

谢谢你的帮助

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",
},
];

Answer 1

在data.js中尝试先导入图像而不是要求

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