通过 gatsby-node 将图像导入 GraphQL 不起作用:缺少 childImageSharp

Posted

技术标签:

【中文标题】通过 gatsby-node 将图像导入 GraphQL 不起作用:缺少 childImageSharp【英文标题】:Importing images to GraphQL via gatsby-node is not working: childImageSharp is missing 【发布时间】:2021-07-16 02:28:33 【问题描述】:

我正在尝试使用 Gatsby Node 和 Sharp transformer 管道将 JSON 文件中的图像加载到 GraphQL 中。内容节点已创建,但缺少 childImageSharpgatsbyImageData 属性,这让我相信我的设置有问题。

我在 Github 上创建了一个最小示例以使问题可重现:https://github.com/stekhn/gatsby-image-sourcing

项目结构

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"
  

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://***.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

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

图像路径看起来不错,并且 gatsby-node.js 运行没有问题。然而,当我在 GraphiQL 资源管理器中检查 projectCardsprojectCardsImage 时,Gatsby Transformer Sharp 似乎从未运行过。通常,我希望看到属性childImageSharp 成为image 的一部分。

我很清楚还有其他加载和使用图像的方法,它们都可以正常工作。但是现在,我有点赞同使用 Gatsby Node 来填充 GraphQL 数据库的确切类型的对象,我需要在我的组件中。

参考文献

How to load a local image on a gatsby source plugin? https://freddydumont.com/blog/how-to-source-images-and-data-from-json-files-in-gatsby

非常感谢任何帮助。

【问题讨论】:

【参考方案1】:

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

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

在当前配置下,Gatsby 正在基于字符串生成 id,而不是在您在 sourceNodes 函数中生成的 GraphQL 节点上,这对我来说看起来不错。

【讨论】:

我认为只有在使用 gatsby-transformer-json 获取 JSON 文件和其中的相应图像时才如此。我尝试了所有不同的路径都无济于事。将 gatsby-node 扔出窗外并采用gatsby-transformer-json 方法可能是最好的主意。 哈哈,是的,我想是的。随时通知我【参考方案2】:

您好,我也有同样的问题,我去年遵循了在 v2 中工作的确切教程。仅供参考,我在 gatsby https://github.com/gatsbyjs/gatsby/issues/31380

上打开了一个问题

【讨论】:

问题的答案在这里:github.com/gatsbyjs/gatsby/discussions/…

以上是关于通过 gatsby-node 将图像导入 GraphQL 不起作用:缺少 childImageSharp的主要内容,如果未能解决你的问题,请参考以下文章

如何通过xml文件导入时将图像连接到magento

gatsbyjs:多次使用graphql,还是一次使用并通过上下文传递结果?

删除图像透明度

javascript gatsby-node.js strapi两个来源

如何通过 iOS 6 中的 RESTkit 2.0 将 JSON 中的 base64 图像导入核心数据二进制文件?

在 Gatsby 中允许可选的 GraphQL 数据