我构建了一个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>
);
}
1条答案
按热度按时间ozxc1zmp1#
我使用import from而不是直接使用js对象