Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

372
Vistas
¿Por qué [gatsby-plugin-image] falta el accesorio de imagen para los datos JSON?

Objetivo: Leer datos JSON que tienen ruta de imágenes, título asociado, descripción y alt. Graphql consultará los datos JSON y los mostrará en cuatro tarjetas. Título, descripción y alt funcionan pero la imagen no funciona. Console.log muestra: "[gatsby-plugin-image] Falta el accesorio de imagen"

 const Expertise = () => { // query data const data = useStaticQuery(graphql` query ExpertiseQuery { allExpertiseJson { edges { node { alt description title img { childImageSharp { gatsbyImageData } } } } } } `) // iterate over JSON data function getExpertise(data) { const expertiseArray = [] data.allExpertiseJson.edges.forEach((item, index) => { const image=getImage(item.node.img) expertiseArray.push( <ExpertiseCard key={index}> <h3>{item.node.title}</h3> <p>{item.node.description}</p> <GatsbyImage> image={image} alt={item.node.alt} </GatsbyImage> </ExpertiseCard> ) }) return expertiseArray } return ( <ExpertiseContainer> <ExpertiseH1><span>|</span>Expertise</ExpertiseH1> <ExpertiseH2>Solution architect from lean design to agile development</ExpertiseH2> <CardContainer> {getExpertise(data)} </CardContainer> </ExpertiseContainer> ) }

datos JSON:

 [ { "title": "Design Thinking", "description": "An ardent supporter of design thinking and emphathizing users to understand the entire spectrum of the problem space.", "img": "../images/design_thinking.jpg", "alt": "Design Thinking" }, { "title": "Lean Startup", "description": "A practitioner of the Lean Startup principles for delivering business value and reduce product development cycle by designing MVP.", "img": "../images/design_thinking.jpg", "alt": "Design Thinking" }
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Tiene un problema de sintaxis en:

 <GatsbyImage> image={image} alt={item.node.alt} </GatsbyImage>

Aquí, está envolviendo la imagen dentro del componente GatsbyImage mientras necesita pasarle la image como:

 <GatsbyImage image={image} alt={item.node.alt} />
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda