[SOLVED] Gatsby localized image using i18next

Gatsby localized image using i18next

I have set up i18n using gatsby-plugin-react-i18next plugin. All the contents work great but I also need to localize some static images but can't figure out how to get this working.

I have tried passing image prop on GatsbyImage but this is not working.

<GatsbyImage
   image={t('index.landingAdditionalContent.picture.src')}
   alt={t('index.landingAdditionalContent.picture.alt')}
/>

Images are stored in src/images/ folder

This is the first time I am working with Gastby so please help me here 🙏

Solution

I think you need to query each specific image node for each language. The approach using the translation (t()) will search in the translation JSON the specific translation, which you don't have (because you don't know the node structure).

Without knowing your data structure or implementation it's difficult to guess the snippet but extending the documentation:

export const query = graphql`
  query ($language: String!) {
    dataJson(language: {eq: $language}) {
      ...DataFragment
    }
  }
`;

You have a language variable available in the context to use and filter the GraphQL nodes.