图像不会在 React 中加载数组

Question

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

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

我运行遇到的问题是，如果我使用来自互联网的随机 img link，图像会导入到我的产品中并显示在我的产品列表中。然而，这不是我想要做的，因为我想使用一些我自己的图像。

当我的 Product.jsx 试图使用我保存在 src/assets/img/ 中的图像时，img 将无法加载。我尝试使用 require 标签，但它仍然无法正常工作。我也已经将所有内容上传到我的 github 页面，可以找到 here 并用作参考。

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

感谢您的帮助

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 中尝试先导入图像而不是 require

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

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

图像不会在 React 中加载数组

Images Won't Load with Array in React

javascript

arrays

reactjs

array.prototype.map