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

Posted 2023-03-28

【中文标题】图像未显示在反应卡组件中

【英文标题】：Image not showing up in react card component

【发布时间】：2021-09-18 21:09:10

【问题描述】：

除了图像/替代文本之外的所有内容都在卡片中正确呈现。 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;
    
    

请帮我找出错误

【参考方案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