Quiero representar una imagen en mi componente 'tarjeta', que obtiene la URL de la imagen de los accesorios, pero la imagen no se muestra. Creé la aplicación de reacción con npx create-react-app, la imagen está en src/images y el componente de la tarjeta está en src/components. el componente de la tarjeta:
import React from 'react' export default function Card(props) { return ( <section className='card'> <img/> <div className='card--info'> <img src={props.img}/> <p className='card--info'> <span className='gray'>{props.rating}</span> ({props.reviewCount}) • {props.country} </p> <p>{props.title}</p> <p><span className='bold'>{props.price}</span> / person</p> </div> </section> ) }el componente de la aplicación:
import React from "react" import Navbar from './components/Navbar' import Hero from './components/Hero' import Card from './components/Card' export default function App(){ return ( <div> <Navbar /> <Hero /> <section className="cards"> <Card img = '../images/image12.png' rating="5.0" reviewCount = {6} country = "USA" title = "Life lessons with Katie Zaferes" price = {136} /> </section> </div> ) } También probé los siguientes métodos: <img src={require(props.img)}/> -> este mostrará un error: Error no detectado: no se puede encontrar el módulo '../images/image12.png' <img src={new URL(props.img, import.meta.url)
alguien mas sabe que debo hacer?
Debe importar la imagen para usar si tiene una imagen estática.
import React from "react" import Navbar from './components/Navbar' import Hero from './components/Hero' import Card from './components/Card' import defImage from '../images/image12.png' export default function App(){ return ( <div> <Navbar /> <Hero /> <section className="cards"> <Card img ={defImage} rating="5.0" reviewCount = {6} country = "USA" title = "Life lessons with Katie Zaferes" price = {136} /> </section> </div> ) }También si tiene un nombre de imagen dinámico y desea usarlo. Intenta usarlo de esta manera.
import React from "react" import Navbar from './components/Navbar' import Hero from './components/Hero' import Card from './components/Card' export default function App(){ return ( <div> <Navbar /> <Hero /> <section className="cards"> <Card img ="image12.png" rating="5.0" reviewCount = {6} country = "USA" title = "Life lessons with Katie Zaferes" price = {136} /> </section> </div> ) }Y en el componente de la tarjeta:
import React from 'react' export default function Card(props) { return ( <section className='card'> <img/> <div className='card--info'> <img {require(`../images/${props.img}`)}/> <p className='card--info'> <span className='gray'>{props.rating}</span> ({props.reviewCount}) • {props.country} </p> <p>{props.title}</p> <p><span className='bold'>{props.price}</span> / person</p> </div> </section> ) }Asegúrese de que si está utilizando imágenes con require, esas imágenes deben estar en una carpeta pública
Tal vez un camino no es correcto? Ponga la imagen en la carpeta pública y luego use /image/name.png Lo uso todo el tiempo. Creo que si presento algo para todos, puede ser público.