通过gatsby节点将图像导入GraphQL不起作用：缺少childImageSharp

我正在尝试使用和管道将JSON文件中的图像加载到GraphQL中。内容节点已创建，但缺少

childImageSharp

和

gatsbyImageData

属性，这使我相信我的设置有问题

我在Github上创建了一个最小的示例，以使问题重现：

项目结构

src
├── data
│   └── projects.json
├── images
│   └── projects
│       ├── adam-vradenburg-sWAAhaoVuko-unsplash.jpg
│       ├── radek-homola-RfTD9NoLMEE-unsplash.jpg
│       ├── steven-kamenar-MMJx78V7xS8-unsplash.jpg
│       ├── will-tarpey-82pi_nJbE5M-unsplash.jpg
│       └── wolfgang-hasselmann-ZM4IxIcF9AU-unsplash.jpg
└── pages
    ├── 404.js
    └── index.js

package.json

{
  "name": "gatsby-image-sourcing",
  "dependencies": {
    "gatsby": "^3.3.1",
    "gatsby-plugin-image": "^1.3.1",
    "gatsby-plugin-sharp": "^3.3.1",
    "gatsby-source-filesystem": "^3.3.0",
    "gatsby-transformer-sharp": "^3.3.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

[
  {
    "title": "Project 1",
    "year": "2021",
    "tags": ["foo", "bar"],
    "image": "adam-vradenburg-sWAAhaoVuko-unsplash.jpg"
  }
]

gatsby config.js

module.exports = {
  siteMetadata: {
    title: "Gatsby Image Sourcing",
  },
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images/projects/`,
      },
    },
  ],
};

gatsby node.js:

const path = require("path");
const projects = require("./src/data/projects.json");

// Reference: https://stackoverflow.com/a/56012718
exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
  projects.forEach((project) => {
    const { title, year, tags, image } = project;
    const { name, ext } = path.parse(image);

    const absolutePath = path.resolve(
      __dirname,
      "src/images/projects",
      image
    );

    const imageData = {
      name,
      ext,
      absolutePath,
      extension: ext.substring(1),
    };

    console.log(imageData);
  
    const imageNode = {
      ...imageData,
      id: createNodeId(`project-card-image-${name}`),
      internal: {
        type: "projectCardsImage",
        contentDigest: createContentDigest(imageData),
      },
    };

    actions.createNode(imageNode);

    const node = {
      title,
      year,
      tags,
      image: imageNode,
      id: createNodeId(`project-card-${title}`),
      internal: {
        type: "projectCards",
        contentDigest: createContentDigest(project),
      },
    };

    actions.createNode(node);
  });
};

projects.json

{
  "name": "gatsby-image-sourcing",
  "dependencies": {
    "gatsby": "^3.3.1",
    "gatsby-plugin-image": "^1.3.1",
    "gatsby-plugin-sharp": "^3.3.1",
    "gatsby-source-filesystem": "^3.3.0",
    "gatsby-transformer-sharp": "^3.3.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

[
  {
    "title": "Project 1",
    "year": "2021",
    "tags": ["foo", "bar"],
    "image": "adam-vradenburg-sWAAhaoVuko-unsplash.jpg"
  }
]

映像路径看起来很好，gatsby-node.js运行没有问题。然而，当我在GraphiQL浏览器中检查

projectCards

和

projectCardsImage

时，似乎盖茨比变形金刚从未运行过。通常，我希望看到属性

childImageSharp

成为

image

的一部分

我很清楚，还有其他加载和使用图像的方法，这很好。但是现在，我有点赞同使用Gatsby节点来填充GraphQL数据库的想法，这正是我在组件中需要的对象

参考资料

module.exports = {
  siteMetadata: {
    title: "Gatsby Image Sourcing",
  },
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images/projects/`,
      },
    },
  ],
};

---

非常感谢您的帮助。

我认为图像的路径应该是：

"image": "../images/projects/adam-vradenburg-sWAAhaoVuko-unsplash.jpg"

---

在当前配置中，盖茨比基于字符串生成

id

，而不是在

sourceNodes

函数中生成的GraphQL节点上，这对我来说很好。

您好，我也有同样的问题，我去年遵循了在v2中工作的确切教程。仅供参考，我打开了一个关于盖茨比的问题

我认为只有当使用

gatsby transformer json

来获取json文件和其中相应的图像时，这才是正确的。我尝试了所有不同的方法，但都没有用。也许把盖茨比节点扔出窗口并使用

gatsby transformer-json

方法是最好的主意。哈哈，是的，我这么认为。让我继续发帖这个问题的答案在这里：谢谢你@LekoArts