Image not getting displayed in react project

Question

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.

In your browser, open the devtools and check the network panel to see the request that's going out. Seems like you might have an incorrect path structure; you'll be able to see it easily from the devtools where it is trying to load the image from. — Charles Chen
– Charles Chen, Commented Jan 3, 2023 at 16:54

Bhrugu Tundeliya · Accepted Answer · 2023-01-01 09:35:26Z

1

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

answered Jan 1, 2023 at 9:35

Bhrugu Tundeliya

16212 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kdqdmmg0 Over a year ago

Why does it fix the issue(It did indeed)?

Bhrugu Tundeliya Over a year ago

when you pass something wrapping your custom component it will take that tag as a children's tag.. you have to specify that.

Collectives™ on Stack Overflow

Image not getting displayed in react project

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related