No encuentro el motivo por el cual la imagen que paso como prop en el componente no se ve en el navegador.
A la imagen la tengo en la carpeta images, al mismo nivel que la carpeta src. He probado cambiar la imagen a la carpeta public y tampoco sale.
Lo que he probado:
import { useState } from "react";
const ImageComponent = ({ src, alt, message }) => {
const [showMessage, setShowMessage] = useState(false);
const handleClick = () => {
setShowMessage(true);
};
return (
<div>
<img src={src} alt={alt} onClick={handleClick} />
{showMessage && <div>{message}</div>}
</div>
);
};
export default ImageComponent;
Luego, lo vuelco en mi page que se llama CuriositiesPage:
import ImageComponent from "../components/ImageComponent";
export const CuriositiesPage = () => {
return (
<main>
<Link to="/curiosities">
<h1>Curiosidades</h1>
<section>
<ImageComponent
src={`./images/conejozanahoria.jpg`}
alt={`Conejito`}
message={
"Los conejos tienen dientes que crecen constantemente, por lo que necesitan masticar constantemente para mantenerlos limados. Además, los conejos pueden saltar muy alto y correr a una velocidad de hasta 50 kilómetros por hora."
}
/>
</section>
He probado a cambiar la imagen a la carpeta public y tampoco sale. También he probado:
import gatosaltando from "../images/gatosaltando.jpg";
<section>
<ImageComponent
src={`url(${gatosaltando})`}
alt={`Gato Saltando`}
message={
"Los gatos son capaces de saltar hasta seis veces su longitud corporal y aterrizar de manera segura en sus pies. Esto se debe a una columna vertebral muy flexible y una habilidad para girar sus patas mientras están en el aire."
}
/>
</section>