React影像未在Github中顯示（已經嘗試過以前的解決方案）-有解無憂

備注：Project 在將影像上傳到 Gihub 之前顯示了影像。我有一個包含 84 張產品圖片的 JSON 檔案，所以我不想對每張圖片都使用匯入匯出方法，而是想像現在這樣映射它們并讓它作業。我嘗試使用 PUBLIC_URL="." 創建一個 .env。和 PUBLIC_URL=。兩者都不起作用。我已經嘗試從我的 json 中洗掉主頁，但它沒有用。

代碼：我的名為 product-data.json 的 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 };

ProductCard.jsx 從“反應”中匯入反應；

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 };

我相信這是這個問題的所有相關代碼，但如果我需要包含任何其他內容，請告訴我。謝謝

uj5u.com熱心網友回復：

在您的應用程式中使用相對影像 url 不是一個好主意。它們取決于當前位置，這可能會導致錯誤。我建議將影像放在 CDN 中并使用絕對 URL。另一種選擇是將.json檔案更改為.js并匯入這些影像（然后 webpack 會處理它們）。

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": ""
  },
//...

您還應該PUBLIC_URL正確設定并將其指向 github 頁面

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/537644.html

標籤：反应JSON知乎github页面

上一篇：推送到遠程存盤庫時，這兩個拒絕訊息有什么區別？

下一篇：未在Linux上設定GithubActions環境變數