Image not getting displayed in react project

January 1, 2023

This is my App.js. Here, I call the "Profile" Component.

import './App.css';
import Profile from "./Profile"

function App() {
  return (
    <div className="App">
      <Profile />
    </div>
  );
}

export default App;

Then, inside Profile.js, I call Card component and inside the Card component, I’ve enclosed an image.

import React from 'react'
import Card from './Card'
import styles from "./Profile.module.css"
import image1 from "./assets/profile1.png"
const Profile = () => {
  return (
    <Card>
      <div>
        <img src={image1} alt="" />
      </div>

    </Card>
  )
}

export default Profile

Inside of Card component, I’ve just applied some CSS to make it look like a Card.

import React from 'react'
import styles from "./Card.module.css"

const Card = () => {
  return (
    <div className={styles.card}>

    </div>
  )
}export default Card

This is my folder structure.

I’m really confused why the image isn’t getting showed up. Currently this is the output I’m getting.

I’ve restarted the server as well. But it’s not getting fixed.

>Solution :

your card doesn’t have a child component return maybe that could be the problem

    import React from 'react'
    import styles from "./Card.module.css"
    
    const Card = ({children}) => {
      return (
        <div className={styles.card}>
    {children}
        </div>
      )
    }
export default Card

try this