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

【问题标题】：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;

请帮我找出错误

【问题讨论】：

标签： reactjs image map-function card

【解决方案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

【讨论】：