可选字段图像和 'childImageSharp' 为 null |盖茨比、GraphQL 和 YAML
Posted
技术标签:
【中文标题】可选字段图像和 \'childImageSharp\' 为 null |盖茨比、GraphQL 和 YAML【英文标题】:Optional field image and 'childImageSharp' as null | Gatsby, GraphQL & YAML可选字段图像和 'childImageSharp' 为 null |盖茨比、GraphQL 和 YAML 【发布时间】:2020-07-18 14:16:21 【问题描述】:编辑:我最终创建了我的问题的一个小副本并将其发布到 Gatsby 的 GitHub,我最终在那里获得了一些帮助。 这是该问题的link!
如果此问题已在其他地方得到处理,我很抱歉,但我无法找到我需要的答案。
我目前正在处理 Gatsby、GraphQl 和 YAML 文件,我有多个要映射的部分,但有些有图像,有些没有。 我通过使用 childImageSharp 声明图像来定义我的 GraphQL
sections
title
description
imageHere
childImageSharp
fluid(maxWidth: 600)
...GatsbyImageSharpFluid_noBase64
我看到了一个解决方案,该解决方案涉及将其添加到我的 gatsby-node.js 中,以便可以从我的 YAML 文件中正确读取路径
exports.createSchemaCustomization = ( actions ) =>
const createTypes = actions;
const typeDefs = `
type allProjectPageYaml implements Node
imageHere: [String]!
`;
createTypes(typeDefs);
;
现在我的问题是有些部分有 imageHere 字段,有些则没有
sections:
- title: Title 1
description: Description 1
- title: Title 2
description: Description 2
imageHere: Image1
我得到的错误是 TypeError: Cannot read property 'childImageSharp' of null
我的解决方法是什么?
【问题讨论】:
你确定 typeError 是由 graphql 查询而不是由试图访问该属性的 js 触发的吗?在后一种情况下,您可以使用深度属性检查,例如: const image = data.sections.imageHere?.childImageSharp 【参考方案1】:您已将 imageHere
定义为所需的字符串数组,其中:imageHere: [String]!
。
如果它实际上应该是一个可选的图像节点,您可能希望将其定义为正确的类型(类似于GatsbyImage
,但我不记得它究竟是什么——您应该能够签入graphiql)。这看起来更像imageHere: GatsbyImage
(没有爆炸,没有方括号)。
【讨论】:
感谢您的回答,但我考虑到了这一点,后来更改了我的 '[String]!到“文件”,因为根据这个link on Gatsby's page,它应该是一个文件。但是,它仍然对我失败。实际上,现在它在我用这个构建的模板页面上失败了。似乎 childImageSharp 没有采用我的图像路径并将其假设为实际路径。相反,它将其显示为字符串。知道是什么原因造成的吗? @ItzaMi 哦,天哪,当 Gatsby 的推理系统遇到无法完全解析为系统上文件的节点时,通常会发生这种情况。即使只有 1 和其他 999 工作,该节点也被视为字符串类型。 那么解决方案是什么?我是 gatsby 的新手,这是我第一次遇到这样的事情 @ItzaMi 您需要找出哪个路径无效。据我所知,这是一个手动过程。【参考方案2】:我最终创建了我的问题的一个小副本并将其发布到 Gatsby 的 GitHub 上,我最终在那里获得了一些帮助。 这是该问题的link!
【讨论】:
【参考方案3】:检查 ChildImageSharp 尝试引用的文件路径的拼写。当我收到此错误时,需要更正 img 文件路径。
【讨论】:
【参考方案4】:对我来说,这是一个缓存问题,请尝试删除 .cache、public、dirs 或运行
gatsby clean
更新
如果使用netlify ci/cd,还需要添加到package.json
"resolutions":
"sharp": "0.24.0"
https://community.netlify.com/t/error-input-file-contains-unsupported-image-format-gatsby/10891/4
【讨论】:
以上是关于可选字段图像和 'childImageSharp' 为 null |盖茨比、GraphQL 和 YAML的主要内容,如果未能解决你的问题,请参考以下文章
盖茨比 - 无法读取 null 的属性“childImageSharp”
需要在 Django Formset 中有一个必填字段和可选字段
在 netlify cms 和 gatsby js 中使图像可选