Estoy siguiendo un tutorial de Scrimba sobre React y lo estoy haciendo en mi propia máquina localmente. Tengo una imagen en mi carpeta de imágenes dentro de mi carpeta src. En mi carpeta de componentes, tengo un componente llamado Tarjeta que se muestra, pero ¿por qué mi imagen solo se muestra cuando la importo y no como las otras dos formas que se comentan?
Puede ser algo estúpido, pero no puedo verlo. Gracias a todos. Solo para mayor claridad, todo lo demás funciona salvo las etiquetas de imagen comentadas.
Aplicación.js
function App() { return ( <div> <Navbar /> <Hero /> <Card img="katie-zaferes.png" rating="5.0" reviewCount="6" country="USA" title="Life Lessons With Katie Zaferes" price={136} /> </div> ); }Tarjeta.js
import Star from "../images/star.png"; import Athlete from "../images/katie-zaferes.png"; const Card = (props) => { return ( <div className="card"> <img src={Athlete} alt="card-image" /> {/* <img src="../images/katie-zaferes.png" alt="img" /> */} {/* <img src={`../images/${props.img}`} alt="card-image" /> */} <div className="card--stats"> <img src={Star} alt="star" className="card--star" /> <span>{props.rating}</span> <span className="gray">{props.reviewCount} •</span> <span className="gray">{props.country}</span> </div> <p>{props.title}</p> <p> <b>From $ {props.price} </b> / person </p> </div> ); }; export default Card;En el caso de la imagen que está tratando de mostrar en su App.js, le está dando a su componente Card una ruta incorrecta para encontrar su imagen, su aplicación necesita saber dónde encontrar su imagen "katie-zaferes.png", entonces la forma correcta debe ser:
<Card img='../images/katie-zaferes.png' ... />(Supongo que sus archivos App.js y Card.js están en la misma carpeta, en caso de que no lo estén, debe modificar la ruta para que coincida con su /images/katie-zaferes.png)
Nota: Por cierto, para sus próximas preguntas aquí en StackOverflow, intente escribir su código directamente en su publicación, usando el botón Javascript/HTML/CSS, nunca use imágenes porque hace más trabajo para que las personas respondan su pregunta/
Descubrí que era un problema de ruta de imagen. Coloqué mi carpeta de 'imágenes' en 'público'. Luego podría eliminar todas las importaciones y acceder a ellas desde cualquier lugar a través '/images/example.png' .
Se utiliza en un componente como se muestra a continuación:
const Card = (props) => { return ( <div className="card"> <img src={`/images/${props.img}`} alt="card" /> <div className="card--stats"> <img src="/images/star.png" alt="star" className="card--star" /> <span>{props.rating}</span> <span className="gray">{props.reviewCount} • </span> <span className="gray">{props.country}</span> </div> <p>{props.title}</p> <p> <b>From $ {props.price} </b> / person </p> </div> ); }; export default Card;