Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

380
Visualizações
¿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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda