React images not showing in Github (tried previous solutions already)-CodePudding

Notes: Project previously showed images before uploading it to Gihub. I have a JSON file of 84 product images so I would like to not use the import export method for every single picture instead I want to map through them like I currently am and have it work. I tried creating a .env with PUBLIC_URL="." and PUBLIC_URL=. both did not work. I tried deleting the homepage from my json already and it did not work.

Code: My JSON file named product-data.json for Reference I am not including every single item here for easier viewing but I have 84 of them altogether:

    [
  {
    "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 };

ProductCard.jsx import React from "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 };

I believe this is all the relevant code for this question but let me know if I need to include anything else. Thank you

CodePudding user response：

It is not a good idea to use relative image url in your application. They depend on current location and it may lead to the errors. I would suggest placing images in CDN and using absolute urls. Another option is to change .json file to .js and import those images (then webpack will take care of them).

import venomSrc from './images/venom.png'

export default = [
  {
    "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": venomSrc, // use here
    "link": "https://stockx.com/adidas-don-issue-2-marvel-venom?size=11",
    "color": "black",
    "countInStock": 10,
    "brand": "Adidas",
    "numReviews": 10,
    "description": ""
  },
//...

Also you should setup PUBLIC_URL correctly and point it to github pages