文章/答案/技术大牛

发布

社区首页 >问答首页 >图像未显示在react card组件中

问图像未显示在react card组件中
EN

Stack Overflow用户

提问于 2021-07-08 19:41:27

回答 1查看 39关注 0票数 1

除图像/alt文本之外的所有内容都可以在卡片中正确呈现。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文件

这是不映射图像的map函数

    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;

请帮我找到这个bug

reactjs

image

map-function

card

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-08-02 17:44:10

如果我们有一个存放静态文件的根文件夹，比如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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68300969

复制

相似问题

问图像未显示在react card组件中
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图像未显示在react card组件中EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图像未显示在react card组件中
EN