This is the parent component. I created data.js and in that data.js I have exported products object where I have written id and img source path. I have posted the image and you can see the file structure there also. I tried both of the image source path from data.js and product.js but none of them work

const ProductList = () => {
    return (
        <div className='productlist'> 
            <div className="pl-texts">
                <h2 className="productlist_title">
                    Create & inspire. It's David
                </h2>
                <p className="productlist_desc">
                    David is a creative portfolio that your work has been waiting for. Beautiful homes, stunning portfolio styles & a whole lot more awaits inside.
                </p>
            </div>
             <div className="product-list">
                {products.map((item) => (
                    <Product key={item.id} img={item.img}/>          
                ))}
             </div>
        </div>
    )
}

    
//This is the child component
import './product.css'
    
    const Product = ({img}) => {
        console.log(img)
        return (
            <div className='product'>
                <div className="p-browser">
                    <div className="p-circle"></div>
                    <div className="p-circle"></div>
                    <div className="p-circle"></div>              
                </div>
                    <img className='p-img' src={img} alt="" /> 
                   //If I give direct img path then it works. I have sent img path in the props.
                   
            </div>
        )
    }
    
    export default Product