备注：项目在上传到Gihub之前会显示图片。我有一个包含84张产品图片的JSON文件，所以我不想对每一张图片都使用导入导出方法，而是像现在这样Map它们并让它工作。我试着用PUBLIC_URL=".”和PUBLIC_URL=创建一个.env，但都不起作用。我试着从我的json中删除主页，但没有成功。
代码：我的JSON文件命名为product-data.json供参考我没有包括每一个项目在这里更容易查看，但我有84他们：

[
  {
    "id": "1",
    "rating": 5,
    "category": "shoes",
    "price": 91,
    "item": "adidas D.O.N. Issue #2 Marvel Venom",
    "slug": "adidas-don-issue-2-marvel-venom",
    "img": "./images/venom.png",
    "link": "https://stockx.com/adidas-don-issue-2-marvel-venom?size=11",
    "color": "black",
    "countInStock": 10,
    "brand": "Adidas",
    "numReviews": 10,
    "description": ""
  },
  {
    "id": "2",
    "rating": 4,
    "price": 130,
    "category": "shoes",
    "item": "adidas Ultra 4D ASU",
    "slug": "adidas-ultra-4d-asu",
    "img": "./images/asushoe.png",
    "link": "https://stockx.com/adidas-ultra-4d-arizona-state?size=11",
    "color": "red",
    "countInStock": 10,
    "brand": "Adidas",
    "numReviews": 10,
    "description": ""
  },
  {
    "id": "3",
    "rating": 3.8,
    "price": 80,
    "category": "shoes",
    "item": "adidas ZX 8000 LEGO",
    "slug": "adidas-zx-8000-lego",
    "img": "./images/Lego.png",
    "link": "https://stockx.com/adidas-zx-8000-lego?size=11",
    "color": "white",
    "countInStock": 10,
    "brand": "Adidas",
    "numReviews": 10,
    "description": ""
  },
  {
    "id": "4",
    "rating": 4.8,
    "price": 177,
    "category": "shoes",
    "item": "adidas Dame 8 Battle Of The Bubble",
    "slug": "adidas-dame-8-battle-of-the-bubble",
    "img": "./images/adidas-Dame-8-Battle-Of-The-Bubble.png",
    "link": "https://stockx.com/adidas-dame-8-battle-of-the-bubble?size=11",
    "color": "blue",
    "countInStock": 10,
    "brand": "Adidas",
    "numReviews": 10,
    "description": ""
  },
  {
    "id": "5",
    "rating": 3.6,
    "price": 116,
    "category": "shoes",
    "item": "adidas Harden Vol. 4 McDonald's",
    "slug": "adidas-harden-vol-4-mcdonalds",
    "img": "./images/adidas-harden-McDonalds.png",
    "link": "https://stockx.com/adidas-harden-vol-4-mcdonalds?size=11",
    "color": "purple",
    "countInStock": 10,
    "brand": "Adidas",
    "numReviews": 10,
    "description": ""
  },
]

ProductCardListing.jsx

import productData from "../product-data.json";
import { ProductCard } from "./index";
import { FilterProducts } from "../utils/filter-products";
import { useFilter } from "../utils/filter-context";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

function ProductCardsListing() {
  const { state } = useFilter();

  return (
    <div className="products-page">
      <br />
      <br />
      <br />
      <h3>
        &nbsp; Showing {FilterProducts(productData, state).length} out of&nbsp;
        {productData.length}
      </h3>
      <div className="product-cards">
        <Row>
          {FilterProducts(productData, state).map(
            ({ id, img, item, price, color, link, rating }) => (
              <Col key={id}>
                <ProductCard
                  key={id}
                  image={img}
                  item={item}
                  rating={rating}
                  price={price}
                  // color={color}
                  link={link}
                />
              </Col>
            )
          )}
        </Row>
      </div>
    </div>
  );
}

export { ProductCardsListing };

jsx从“react”中导入React;

import { Card, ListGroup } from "react-bootstrap";
import Rating from "../Rating";

function ProductCard({
  id,
  image,
  item,
  rating,
  link,
  brand,
  price,

  // size,

  color,
}) {
  return (
    <Card className="product" key={id}>
      <img src={image} className="card-img-top" alt={item} />
      <Card.Body>
        <Card.Title className="product-link">{item}</Card.Title>

        <Rating className="product-rating" rating={rating}></Rating>

        <Card.Text>
          {/* //on click open the stockx link in new tab (the logic for it comes from the product cards listing) */}
          <a
            className="product-price"
            href={link ? link : { link }}
            target="_blank"
            rel="noreferrer"
          >
            StockX Price: {price}
          </a>
        </Card.Text>
        <p className="product-rating">{color}</p>
        <ListGroup.Item>
          <div className="d-grid">
            <button className="btn-primary">Add to cart</button>
          </div>
        </ListGroup.Item>
      </Card.Body>
    </Card>
  );
}

export { ProductCard };

index.js (for the productCard, ProductCardListing, and the Sidebar)

    import { ProductCard } from "./ProductCard";
import { ProductCardsListing } from "./ProductCardsListing";
import { Sidebar } from "./Sidebar";

export { ProductCard, ProductCardsListing, Sidebar };

我相信这是这个问题的所有相关代码，但如果我需要包括任何其他内容，请告诉我。谢谢