如何在Gatsby.js中通过带图片路径的JSON文件用GraphQL查询图片？

你的核心问题是：JSON文件中存储的是图片的URL字符串，而非Gatsby能直接处理的File节点，因此无法直接获取childImageSharp和gatsbyImageData。以下是分步解决方法：

1. 确保Gatsby能读取到Netlify CMS上传的图片 #

你的Netlify CMS配置中media_folder为static/images，但当前Gatsby的gatsby-source-filesystem仅配置了src/images，导致Gatsby无法解析static/images下的图片。先修改gatsby-config.js，添加static/images的文件源：

plugins: [
  // ... 其他已存在的插件
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `static-images`,
      path: `${__dirname}/static/images`,
    },
  },
  // ... 其他已存在的插件
]

2. 修改GraphQL查询，关联图片路径与File节点 #

现在Gatsby能读取到图片文件了，你需要通过JSON中的图片URL匹配对应的File节点，从而获取gatsbyImageData。提供两种实现方式：

方式一：静态匹配（固定图片文件名） #

如果主页背景图的文件名固定，直接在查询中通过publicURL匹配：

query HomepageQuery {
  # 获取主页文本和图片路径
  homepageSettings: settingsJson(name: {eq: "homepage"}) {
    homepage_text
    homepage_background
  }
  # 根据publicURL匹配图片文件
  backgroundImage: file(publicURL: {eq: "/images/homepage.jpg"}) {
    childImageSharp {
      gatsbyImageData(
        placeholder: BLURRED
        width: 1920
        quality: 90
      )
    }
  }
}

方式二：动态匹配（支持用户上传任意图片） #

如果允许用户上传不同文件名的图片，先获取所有图片文件，再在组件中匹配对应URL：

query HomepageQuery {
  homepageSettings: settingsJson(name: {eq: "homepage"}) {
    homepage_text
    homepage_background
  }
  # 获取所有images目录下的图片文件
  allImages: allFile(filter: {publicURL: {regex: "/images/"}}) {
    nodes {
      publicURL
      childImageSharp {
        gatsbyImageData(
          placeholder: TRACED_SVG
          width: 1920
        )
      }
    }
  }
}

3. 在组件中使用GatsbyImage #

根据上面的查询结果，在组件中渲染图片：

对应方式一的组件代码 #

import { GatsbyImage, getImage } from "gatsby-plugin-image";

export default function Homepage({ data }) {
  const { homepage_text } = data.homepageSettings;
  const image = getImage(data.backgroundImage);

  return (
    <div className="homepage">
      <h2>{homepage_text}</h2>
      {image && <GatsbyImage image={image} alt="主页背景" />}
    </div>
  );
}

对应方式二的组件代码 #

import { GatsbyImage, getImage } from "gatsby-plugin-image";

export default function Homepage({ data }) {
  const { homepage_text, homepage_background } = data.homepageSettings;
  // 匹配对应URL的图片
  const backgroundImage = data.allImages.nodes.find(
    img => img.publicURL === homepage_background
  );
  const image = getImage(backgroundImage);

  return (
    <div className="homepage">
      <h2>{homepage_text}</h2>
      {image && <GatsbyImage image={image} alt="主页背景" />}
    </div>
  );
}

可选优化：将图片存储到src/images #

如果希望Gatsby更好地处理图片（比如支持自动压缩、缓存），可以修改Netlify CMS的config.yml，将上传的图片直接存储到src/images：

media_folder: src/images
public_folder: /images

修改后可移除之前添加的static-images文件源配置，因为Gatsby已配置src/images的文件源，查询和组件代码无需改动。

内容的提问来源于stack exchange，提问作者royketelaar