0
333
Vistas¿Cómo mostrar imágenes usando accesorios en reaccionar?
Soy nuevo en React y estoy siguiendo un tutorial. Ahora mismo tengo el siguiente código:
índice.js:
import ReactDOM from "react-dom" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") )Aplicación.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" /> ) }Contacto.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 > ) }Todos los archivos anteriores están estructurados así:
Mi problema es que parece que no puedo mostrar las imágenes:
Así es exactamente como lo tiene el tutorial, y sé que el directorio de imágenes es correcto ya que si codifico el directorio para 'mr-whiskerson.png' en el componente de contacto como este 
..la imagen se muestra
Entonces mi pregunta es, ¿hay algo que me estoy perdiendo? ¿Necesito usar una sintaxis especial para mostrar imágenes que no se usa para mostrar párrafos? Honestamente, estoy confundido y realmente agradecería a aquellos que pudieran ayudarme a entender. Gracias.
3 Respuestas
Responde la pregunta0
en las imágenes de la carpeta de su estructura y el archivo App.js en una estructura, solo necesita pasar la URL de la imagen en App.js con
./images/icono-telefono.png
0
Si pasa una ruta al componente como una cadena, su componente recibe esa ruta relativa, pero relativa al componente principal. No funcionará.
Debe importar la ruta a la imagen en la sección de importación en 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" /> ) }en tal caso, su ruta se pasará en otros componentes correctamente como un puntero (en el nivel donde debería existir).
Deje el archivo Contact.js como está, debería funcionar.
0
No creo que nadie aquí entienda lo que estás tratando de hacer. Desea inyectar imágenes usando accesorios porque esa es la lección que está aprendiendo, y no usar 'importar'. Prueba esto:
- mueva esas imágenes de la carpeta 'src' a la carpeta 'pública'
- cuando haga referencia a la imagen en su archivo 'App.js', asegúrese de que la ruta sea relativa a 'index.html', ya que ahí es donde realmente se muestran (es decir, img="./images/mr-whiskerson.png)
- elimine las 'importaciones' para todas las imágenes; no las necesitará cuando use accesorios para imágenes