0

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>

2 respuestas 2

0

Intenta creando una carpeta public a nivel de src, y mete ahi las imagenes, y al acceder a esta carpeta no uses rutas relativas, los compiladores usualmente usan la carpeta public como ruta absoluta:

📂public > 📂images > 🖼️image.jpg

si tienes algo asi, la ruta seria de este tipo

'/images/image.jpg'
0

Este error es comun al inicio, react se renderiza en el archivo index.html que esta en la carpeta public por eso al poner ese path no encuentra el archivo, la mejor manera es importar la imagen con js de esta manera:

import ImageComponent from "../components/ImageComponent";
import Image from "./images/conejozanahoria.jpg"

export const CuriositiesPage = () => {
  return (
    <main>
      <Link to="/curiosities">
        <h1>Curiosidades</h1>

        <section>
          <ImageComponent
            src={Image}
            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>

De esta manera la direccion de la imagen se renderiza junto con react, algunos agregan las imagenes en la carpeta public y hacen referencia directa como /images/image.jpg, pero esto en ocaciones genera problemas.

Espero te haya servido amiga!!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.