使用 i18next 的 Gatsby 本地化图像

Question

我已经使用 gatsby-plugin-react-i18next 插件设置了 i18n。所有内容都很好，但我还需要本地化一些静态图像，但不知道如何让它工作。

我试过在 GatsbyImage 上传递图像道具，但这不起作用。

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

图像存储在 src/images/ 文件夹中

这是我第一次与 Gastby 合作，所以请在这里帮助我

Answer 1

我认为您需要针对每种语言查询每个 specific image node。使用翻译（t()）的方法将在翻译JSON中搜索您没有的特定翻译（因为您不知道节点结构）。

在不了解您的数据结构或实现的情况下，很难猜测代码片段，但扩展了文档：

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

您在上下文中有一个 language 变量可用于使用和过滤 GraphQL 节点。

Gatsby localized image using i18next