reactjs 在npm run build with react之后,图像不会出现

7tofc5zh  于 2023-04-05  发布在  React
关注(0)|答案(1)|浏览(121)

我构建了一个react应用程序。一切都很好,没有错误,在npm run build之后找不到图像。here is an example of an itemand here is how I access it,但在浏览器中,它不能将它们识别为图像console。它唯一能识别的是横幅,这是我唯一使用的背景图像folders
这里是文件夹通常它应该把媒体中的苹果图像,但它只提取横幅。
我已经检查了每条路。
下面是一些代码片段

export const storeData = [
  {
    type: "Mac",
    product: [

      {
        name: "MacBook Air avec puce M1",
        prix: 1199,
        screen: " 13.3 pouces",
        puce: "Puce Apple M1",
        RAM: "8 Go ou 16 Go de mémoire unifiée",
        stockage: "256 Go à 2 To de stockage",
        autonomie: "jusqu'à 18 heures d'autonomie",

        gadgets: "Touch ID, Touch bar",
        options: {
          stockage: {
            taille1: { taille: "256 Go", prix: 0 },
            taille2: { taille: "512 Go", prix: 230 },
            taille3: { taille: "1 To", prix: 460 },
            taille4: { taille: "2 To", prix: 920 },
          },
          RAM: {
            taille1: { taille: "8 Go", prix: 0 },
            taille2: { taille: "16 Go", prix: 230 },
          },
        },
        dimensions: {
          Hauteur: "0.41 à 1.61 cm",
          Largeur: "30.41cm",
          Profondeur: "21.24cm",
          Poids: "1.29 kg",
        },
        exploitation: "macOS",
        productImage: "./apple-images/shop-items/mac-book-air.jpg",
      },
      {
        name: 'MacBook Pro 13"',
        prix: 1599,
        screen: " 13.3 pouces",
        puce: "Puce Apple M2",
        RAM: "8 Go à 24 Go de mémoire unifiée",
        stockage: "256 Go à 2 To de stockage",
        autonomie: "jusqu'à 20 heures d'autonomie",
        gadgets: "Touch ID , Touch Bar",
        options: {
          stockage: {
            taille1: { taille: "256 Go", prix: 0 },
            taille2: { taille: "512 Go", prix: 230 },
            taille3: { taille: "1 To", prix: 460 },
            taille4: { taille: "2 To", prix: 920 },
          },
          RAM: {
            taille1: { taille: "8 Go", prix: 0 },
            taille2: { taille: "16 Go", prix: 230 },
          },
        },
        dimensions: {
          Hauteur: "1.56cm",
          Largeur: "30.41cm",
          Profondeur: "21.24cm",
          Poids: "1.4 kg",
        },
        exploitation: "macOS",

        productImage: "./apple-images/shop-items/macbookPro.png",
      },
    ],
    frontImage: "./apple-images/store-image/mac.png",},}]`

so that's the js object it's called storeData

and here is how I use it

    import React, { useState, useEffect } from "react";
    import StoreContext from "./storeContext";
    import { storeData } from "./StoreData.js";
    import BuyModal from "./BuyModal.jsx";
    import Cart from "./Cart.jsx";
    import { v4 as uuidv4 } from "uuid";

 export function StoreComponent({ Data }) {

   
let prevType = null;
   const [selectedType, setSelectedType] = useState(null);
   const [selectedProducts, setSelectedProducts] = useState([]);
   const [selectedItem, setSelectedItem] = useState([]);
   const [ShowModal, setShowModal] = useState(false);
  const [isClicked, setIsClicked] = useState(false);
  const [showBlurBackground, setShowBlurBackground] =useState(false);
  const [newConfig, setNewConfig] = useState({});
  const [cartItems, setCartItems] = useState([]);

  const handleAddToCart = () => {
    // Générer un nouvel ID unique

    const newId = uuidv4();

    // Ajouter le nouvel élément au tableau cartItems avec l'ID 

unique
    setCartItems([...cartItems, { ...newConfig, id: newId }]);

    console.log(cartItems);
  };

  const handleClick = (name) => {
    setShowModal(true);
    setShowBlurBackground(true);
    const product = storeData
      .filter((item) => item.product.find((p) => p.name === name))
      .flatMap((item) => item.product)
      .find((p) => p.name === name);
    const serializedObject = JSON.stringify(product);
    setSelectedItem(serializedObject);
  };

  const handleClickCart = () => {
    setIsClicked(true);
  };

  const handleClose = () => {
    setIsClicked(false);
    setShowModal(false);
    setShowBlurBackground(false);
  };

  const onStoreSelectorClick = (type) => {
    // Mettre à jour le type de produit sélectionné
    setSelectedType(type);

    // Filtrer les produits correspondants au type sélectionné
    const products = storeData
      .filter((item) => item.type === type)
      .flatMap((item) => item.product);
    setSelectedProducts(products);
  };

  useEffect(() => {
    // Appeler la fonction onStoreSelectorClick avec la valeur "Mac" lors du chargement initial de la page
    onStoreSelectorClick("Mac");
  }, []); // [] en tant que 2ème argument pour que la fonction ne soit appelée qu'une seule fois au chargement initial de la page

  return (
    <StoreContext.Provider value={{ newConfig, setNewConfig }}>
      <div>
        <div
          className={`StoreNav ${
            showBlurBackground ? "blurred-background" : ""
          }`}
        >
          {storeData &&
            storeData.map((item, index) => {
              if (item.type !== prevType) {
                prevType = item.type;
                return (
                  <div
                    className={`StoreSelector ${
                      selectedType === item.type ? "active" : ""
                    }`}
                    type={item.type}
                    key={index}
                    onClick={() => onStoreSelectorClick(item.type)}
                  >
                    <img className="categorie" src={item.frontImage} alt="" />
                    <p>{item.type}</p>
                  </div>
                );
              }
              return null;
            })}
        </div>
        <div className="ItemsWrap">
          {selectedProducts.map((product, index) => (
            <div
              className={`item ${
                showBlurBackground ? "blurred-background" : ""
              }`}
              key={index}
            >
              <h1>{product.name}</h1>
              <div className="images">
                <img className="itemImg" src={product.productImage} alt="" />
              </div>
              <div className="text">
                <p>A partir de {product.prix}€</p>
                <button
                  className="Buy"
                  onClick={() => handleClick(product.name)}
                >
                  Acheter
                </button>
              </div>
            </div>
          ))}
          {ShowModal && (
            <BuyModal
              products={selectedItem}
              onClose={handleClose}
              onAdd={handleAddToCart}
            />
          )}
          <Cart
            onClose={handleClose}
            onOpen={handleClickCart}
            isClicked={isClicked}
            Items={cartItems}
            setCartItems={setCartItems}
          />
        </div>
      </div>
    </StoreContext.Provider>
  );
}
ozxc1zmp

ozxc1zmp1#

我使用import from而不是直接使用js对象

相关问题