问题标签 [gatsby-image]

我目前正在尝试通过我的 gatsby 应用程序中的 graphQl 从内容访问数据。但是我遇到以下错误，

TypeError：无法读取未定义的位图。

请帮忙。我之前已经从这两个组件中轻松访问了我的数据。当我查询内容时问题开始了

我gatsby build在我的 Gatsby 网站上运行时遇到问题，该问题仅在在 Github Actions 容器中运行时出现。它也不总是发生。作为一个很好的例子，今天 Dependabot 启动了 12 个 PR，其中两个因此错误而失败。错误显示如下：

如您所见，没有太多信息，只有一行描述了错误：error Command failed with signal "SIGSEGV". 我一直在寻找一种方法来使 Gatsby 的输出更详细，但该命令似乎没有详细选项build。

我唯一的线索是它可能与处理 Gatsby-Sharp 和 Gatsby-Image 中的图像有关，由于Gatsby GitHub repo 上的这个线程，这个 repo 确实使用了这两者。但似乎该线程中的很多人都在报告只是切线相似的不同问题；很难弄清楚可能有什么关系。

gatsby-config.js：

Package.json：

我不确定还有什么可以帮助的，但一切都在回购中公开。我正在尝试gatsby info在 CI 服务器上运行，但在使其正常工作时遇到了一些麻烦。有任何想法吗？

我有一个相当简单的 Gatsby & Netlify CMS 网站。我无法应付使图像可选的问题。对于 Netlify CMS，只需设置一个字段required: false。如何为 Gatsby 编写查询，以免出现错误“GraphQL 错误字段“图像”不能选择，因为“字符串”类型没有子字段。当图像实际上是一个空字符串，因为它在我的应用程序中不是强制性的？有没有办法解决？

GraphQL 图像查询：

我正在寻求帮助。我在 gatsby 中使用 contentful 创建了一个博客。我希望帖子中的照片使用 gatsby-plugin-sharp 和 gatsby-image。如果我理解正确，我必须使用 gatsby-source-filesystem 插件中的 createRemoteFileNode。但我有一个问题，因为我认为我有一个错误。下面是我添加到 gatsby-node 文件的代码。

我正在寻求帮助，并在此先感谢您。

我无法在文档中找到一个直接的答案，我担心这可能是我不理解 Gatsby/GraphQL 数据查询的问题。本质上，我想知道您的页面/组件中的 GraphQL 查询是在构建时运行还是在客户端运行时运行。例如：

假设我有一个使用 GatsbyJS 构建并托管在 Netlify 上的静态网站。在站点的一个页面上，我查询托管在站点服务器文件系统中的图像。像这样的东西：

当用户访问站点以获取图像并处理它时，它是否会运行，或者它会在构建时运行查询和图像处理并在运行时向客户端提供数据？

我想在浏览器选项卡更改上的 2 个图标之间进行更改但我什至不知道我应该在哪里执行此操作。

favicon 当前在 gatsby-config.js 中设置如下：

我正在使用这个启动器：https ://www.gatsbyjs.org/starters/panr/gatsby-starter-hello-friend/

我在一个项目上与 Gatsby 和 GraphQL 合作了一段时间。这是我第一次使用这个平台，所以还在寻找正确的方法。

现在，我有一个 index.js，它从 GraphQL 查询中加载用户列表，例如

imageUrl 应发送正确的文件路径，即images/image.png 直接发送到用于显示用户信息的反应组件

我现在想弄清楚的是，imageUrl 包含代码库中图像的相对 url。我将需要在此 url 上运行图像查询以获取图像对象，然后我可以将其传递给 gatsby 图像。像这样的东西

但是，据我了解，无法在此处参数化图像 url。解决此问题的最佳方法是什么？这甚至是以这种方式显示带有图像的列表的正确方法吗？

我有一个用 Gatsby 制作的幻灯片 PWA。这是 repo（实际上是真实事物的轻量级、无品牌版本）。我还在Netlify上托管了构建。

复制步骤：

1. 打开Netlify 安装，最好使用 iPad。
2. 将 PWA 添加到主屏幕
3. 通过主屏幕图标打开 PWA；打开后不要触摸任何东西
4. 转到 ioPad 设置并禁用 WiFi/Internet
5. 返回应用程序并浏览幻灯片
6. 请注意，幻灯片图像未加载（我们只看到黑色背景）

连接到 WiFi 时，图像将正常加载。此外，如果您在关闭 WiFi 之前打开幻灯片，即使应用程序关闭然后重新打开，它们也会缓存并保持可用。

期望的行为：一旦应用程序打开，幻灯片中包含的所有图像都会被缓存并准备好使用，而无需打开幻灯片。此应用程序旨在用于无法使用 WiFi 的环境中。我不想要求人们一张一张地打开所有幻灯片，以确保图像在使用前被缓存。

什么已经尝试过：

1. 一次生成所有图像：

   基本原理是，通过生成一次，它们将立即被缓存并脱机工作。

2. 将标头Cache-Control: public, max-age=31536000 ; 据说创建了一个“积极的”缓存策略......

3. 用于每张幻灯片图像。
4. 尝试了普通的 <img src="..." /> 标签和 gatsby-image <Img fluid="..." /> 标签，希望后者可能会带有自己的缓存策略覆盖。
5. 搜索gatsby-plugin-offline和gatsby-plugin-manifest的文档；我不觉得我在那里缺少任何东西。

“真正的”应用程序大约有 45MB 大，所以它很紧凑，但我觉得它应该能够在 iPad 上正确缓存。我不知道我错过了什么；在我看来，PWA 的第一大优势是它能够（合理地）离线工作。我还能做些什么来确保图像被缓存而无需打开所有幻灯片（真实应用程序上有很多）？

非常感谢 ！

第一次在这里发帖，但我已经为此苦苦挣扎了几天。

基本上，我有一个 graphQL 查询，它从内容中提取产品数据，然后将其显示在 GatsbyJS 页面上。查询正确显示产品的标题、价格和描述，但不会加载到图像中。不幸的是，我不断收到错误消息，例如：

“TypeError：无法读取未定义的属性‘0’”

或者

无法读取未定义的属性“src”。（将查询更改为查看图像的 src 时。当我执行此方法时，根据 GraphiQL，url 确实有一个值）

这是我目前正在处理的页面的代码：

试图从 gatsby 项目中的文件夹映射图像。我以我认为可以根据我看过的指南工作的方式设置查询。我没有收到任何错误并且网站加载，但图像没有显示。有什么想法吗？谢谢！

盖茨比-config.js：

询问：

返回：