Question

图像未显示在反应卡组件中

2021-07-08

808

reactjs image map-function card

卡片中除图像/替代文本之外的所有内容均正确呈现。data.js 包含卡片数据。我正在尝试使用 index.js 文件将卡片信息从 data.js 文件映射到 app.js

这是我的 data.js 文件

   import product1 from "../../Images/img2.jpg";
   export const productData=[
       {img : product1,
       alt : "Pizza",
       name: "supremePizza",
       desc: "marinasauce",
       price: "19.99$",
       button:"Add to Cart"},
   
       {img : product1,
       alt : "Pizza",
       name: "supremePizza",
       desc: "marinasauce",
       price: "19.99$",
       button:"Add to Cart"},
   
       {img : product1,
       alt : "Pizza",
       name: "supremePizza",
       desc: "marinasauce",
       price: "19.99$",
       button:"Add to Cart"}
   
   ]

这是 index.js 文件

这是未映射图像的映射函数

    import React from 'react';
    import {
        ProductHeading,
        ProductContainer,
        ProductWrapper,
        ProductTitle,
        ProductCard,
        ProductImg,
        ProductInfo,
        ProductDesc,
        ProductPrice,
        ProductButton
    } from "./ProductsElements";
     
    
    const Products = ({heading,data}) => {
        return (
            
            <ProductContainer>
                <ProductHeading>{heading}</ProductHeading>
                <ProductWrapper>
    
                    {data.map((product,index) => {
                        
                        return(
                            
                              <ProductCard key={index}>
                                  <ProductImg src={product.img} alt={product.alt} />
                                  <ProductInfo>
                                      <ProductTitle>{product.name}</ProductTitle>
                                      <ProductDesc>{product.desc}</ProductDesc>
                                      <ProductPrice>{product.price}</ProductPrice>
                                      <ProductButton>{product.button}</ProductButton>
                                  </ProductInfo>
                              </ProductCard>
                        );
                    })}
                </ProductWrapper>
    
            </ProductContainer>
        )
    }
    
    export default Products

这是主 app.js 文件

    import './App.css';
    
    import Products from './components/Products';
    import {productData} from './components/Products/data';
    
    function App() {
      return (
        
         <Router>
         
           <Hero />
           <Products heading="Choose Your Favorite" data={productData} />
            </Router> 
       
      );
    }
    
    export default App;

请帮我找到错误

Answer 1

如果我们在 src 中有一个用于存放静态文件（例如 assets ）的根文件夹，并且其中有一个 image 文件夹。我们可以将其导入到此目录 /src/components/product/data.js 中的 data.js 文件中，如下所示：

import img from '../../assets/image/img.jpg'

并在我们的 data.js 中使用它，例如：

   import img from '../../assets/image/img.jpg'
   export const productData=[
       {src: img ,
       alt : "Pizza",
       name: "supremePizza",
       desc: "marinasauce",
       price: "19.99$",
       button:"Add to Cart"},
   ]

最终我们的 product.js 将是：

  const Products = ({heading,data}) => {
        return ( 
            <ProductContainer>
                <ProductHeading>{heading}</ProductHeading>
                <ProductWrapper>
                    {data.map((product,index) => {
                        return(
                              <ProductCard key={index}>
                                  //you should change img to src in this line:
                                  <ProductImg src={product.src} alt={product.alt} /> 
                                  <ProductInfo>
                                      <ProductTitle>{product.name}</ProductTitle>
                                      <ProductDesc>{product.desc}</ProductDesc>
                                      <ProductPrice>{product.price}</ProductPrice>
                                      <ProductButton>{product.button}</ProductButton>
                                  </ProductInfo>
                              </ProductCard>
                        );
                    })}
                </ProductWrapper>
    
            </ProductContainer>
        )
    }
    export default Products