1

Tengo un problema al mostrar imagenes en un componente. En la parte de props.item.logo. Como ven todo ser recorre bien, sin embargo la imagen no carga y se queda nada mas con el alt. No se que pueda ser. La informacion viene de un componente padre que a su vez esta viene de un JSON.

const JobPositionitem = (props) => {
  return (
    <div className="jobPositionItem">
      <img src={props.item.logo} alt="logoCompany" />
      <div className="jobPositionItem-section-2">
        <div className="jobPositionItem-section-2-bubbles">
          <p>{props.item.company}</p>
          {props.item.new ? <p>NEW!</p> : null}
          {props.item.featured ? <p>FEATURED</p> : null}
        </div>
        <h4>{props.item.position}</h4>
        <ul>
          <li>{props.item.postedAt}</li>
          <li>{props.item.contract}</li>
          <li>{props.item.location}</li>
        </ul>
      </div>
      <div className="jobPositionItem-section-3">
        <ul>
          <li>{props.item.role}</li>
          <li>{props.item.level}</li>
          {props.item.languages.map((item) => <li key={item}>{item}</li>)}
        </ul>
      </div>
    </div>
  );
};``` 


**COMPONENTE PADRE**

const JobPositionContainer = (props) => (
  <div className="jobPositionContainer">
    {
      props.items.map( item => <JobPositionItem key={item.id} item={item} />)
    }
  </div>
);
9
  • 1
    ¿y has revisado que efectivamente venga una url en props.item.logo? ¿o que props.items en el componente padre traiga algo? Commented el 21 oct. 2020 a las 0:56
  • Si inspeccionas tu página en el explorador. ¿Cómo aparece <img src={props.item.logo} alt="logoCompany" /> renderizado?
    – FranAcuna
    Commented el 21 oct. 2020 a las 1:06
  • @FranAcuna <img src="./images/photosnap.svg" alt="logoCompany"> Asi queda Commented el 21 oct. 2020 a las 1:41
  • @AlterLagos Sii, cuando inspecciono, o hago console.log el elemento viene la url que viene del JSON, la cambie de ahi tambien pero no funciono Commented el 21 oct. 2020 a las 1:42
  • @BetoMartinez Usar <img src="images/photosnap.svg" alt="logoCompany"> hace alguna diferencia? Mira esto
    – FranAcuna
    Commented el 21 oct. 2020 a las 2:24

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.