Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

369
Views
¿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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!