0
328
VisualizaçõesHow to display images using props in react?
I'm new to React and I am following a tutorial. Right now I have the following code:
index.js:
import ReactDOM from "react-dom"
import App from "./App"
ReactDOM.render(
<App />,
document.getElementById("root")
)
App.js:
import Contact from "./components/Contact"
export default function App() {
return (
<div className="contacts">
<Contact
img="../images/mr-whiskerson.png"
name="Mr. Whiskerson"
phone="(111) 111-1111"
email="mr.whiskaz@catnap.meow"
/>
)
}
Contact.js:
import React from "react"
import ReactDOM from "react-dom"
export default function Contact(props) {
return (
< div className="contact-card" >
<img src={props.img} />
<h3>{props.name}</h3>
<div className="info-group">
<img src="../images/phone-icon.png" />
<p>{props.phone}</p>
</div>
<div className="info-group">
<img src="../images/mail-icon.png" />
<p>{props.email}</p>
</div>
</div >
)
}
All the files above are structured like this:
My problem is that I can't seem to display the images:
This is exactly how the tutorial has it, and I know the image directory is correct since if I hard code the directory for 'mr-whiskerson.png' on Contact component like this
..the image is displayed
So my question is, is there something I am missing? Do I need to use special syntax to display images that is not used to display paragraphs? I am honestly confused and I would really appreciate those who could help me understand. Thank you.
3 Respostas
Responde à pergunta0
in your structur folder images and App.js file in one structur, you just need pass the image url in App.js with
./images/phone-icon.png
0
If you pass a path to component as a string, your component receive that relative path, but relative to parent component. It won't work.
You should import path to image in import section in App.js:
import Contact from "./components/Contact"
import yourImage from "../images/mr-whiskerson.png";
export default function App() {
return (
<div className="contacts">
<Contact
img={yourImage}
name="Mr. Whiskerson"
phone="(111) 111-1111"
email="mr.whiskaz@catnap.meow"
/>
)
}
in such a case your path will be passed in another components correctly as a pointer (in the level where it is should exist).
Leave Contact.js file as it is, it should work.
0
I don't think anyone here gets what you're trying to do. You want to inject images using props because that's the lesson you're learning, and not use 'import.' Try this:
- move those images from the 'src' folder to the 'public' folder
- when referencing the image in your 'App.js' file, make sure the path is relative to 'index.html' since that's where they are actually being displayed (i.e. img="./images/mr-whiskerson.png)
- delete the 'imports' for all the images - you won't need them when using props for images