Image not showing up in react card component

Question

everything other than images/alt text are being rendered correctly in card. data.js contains card data. I am trying to map the card information from data.js file to app.js using index.js file

This is my data.js file

   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"}
   
   ]

This is index.js file

This is map function which is not mapping images

    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
    

this is main app.js file

    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;
    
    

Kindly help me find the bug

Answer 1

If we have a root folder for our static files such as assets in the src and inside it we have a image folder. We can import it in the data.js file which exist in this directory /src/components/product/data.js same as bellow :

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

And use it in our data.js such as :

   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"},
   ]

Finally our product.js will be:

  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