1

he creado el siguiente componente:

function Target(props) {
    return (
      <div className="card">
        <h2 className="card-title">
          {props.title}
        </h2>
        <img src={props.img} alt="placeholder" />
        <p className="card-desc"> {props.content}</p>
      </div>
    );
}

este lo utilizo en varias ocasiones por ejemplo:

 <TargetCustom 
   title="titulo" 
   src={imagenRamdon}
   content="contenido de la tarjeta"
  />

El problema es que solo la primera tarjeta que creo me muestra imagen, todas las demás no muestran la imagen, aquí tengo el código de como importo las imágenes (también he probado solo usar la única imagen que me muestra en todas las tarjetas e incluso así pasa lo mismo):

import imagenRandom from "../assets/random.jpg"

Muchas gracias por su apoyo, dado que he probado incluso crear archivos externos con arreglos de imágenes y aun así tampoco me deja mostrar la imagen, no se que este fallando en realidad.

2
  • Osea, agregas varios <TargetCustom> y que sucede? tira un error?
    – Emeeus
    Commented el 7 jul. 2021 a las 12:09
  • no me lanza un error, la aplicación se muestra con normalidad, sin embargo, las imágenes no se muestran. Commented el 7 jul. 2021 a las 12:30

1 respuesta 1

1
    function Target(props) {
        return (
          <div className="card">
            <img src={props.img} alt="placeholder" /> // <-------- {props.img}
          </div>
        );
    }
     <TargetCustom 
       title="titulo" 
       src={imagenRamdon} // <-------- {props.src}
       content="contenido de la tarjeta"
      />

Tus argumentos se llaman diferente.

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.