👀 Views: 2 💬 Answers: 1 📅 Created: 2025-06-06

gatsby graphql gatsby-image JavaScript

I'm testing a new approach and I've been banging my head against this for hours. I'm working on a personal project and I'm using Gatsby with the gatsby-image plugin and GraphQL to load images from a local source. However, I'm struggling to properly set alt text for these images. Even though I've added alt text in my GraphQL query, it's not appearing on the rendered image. The query looks like this: ```graphql query MyQuery { file(relativePath: { eq: "my-image.jpg" }) { childImageSharp { fluid { ...GatsbyImageSharpFluid originalName } original { src alt } } } } ``` In my React component, I'm trying to access the alt text like this: ```jsx import React from 'react'; import Img from 'gatsby-image'; const MyComponent = ({ data }) => { const image = data.file.childImageSharp.fluid; const altText = data.file.childImageSharp.original.alt; // This is returning undefined return <Img fluid={image} alt={altText} />; }; export default MyComponent; ``` I've confirmed that the GraphQL query is correct and returns the expected data shape, but `data.file.childImageSharp.original.alt` is always `undefined`. I've also checked the image file to ensure it has correct metadata. I’m using Gatsby v2.32.0 and gatsby-image v2.4.0. What could be causing this scenario? Is there something I'm missing in the way Gatsby handles image metadata, or is there a better approach for setting alt text in this scenario? I'd really appreciate any guidance on this. I'm working on a desktop app that needs to handle this. Any ideas how to fix this? Thanks in advance!