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" }
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} />