问题标签 [gatsby-plugin]

我使用宇航员从基本的默认 gatsby 启动器构建了这个项目

我不知道我做错了什么，因为这个项目与我的另一个项目非常gatsby-node相似gatsby-config。此错误反复在控制台中循环

盖茨比-node.js

盖茨比-config.js

买了一台新电脑，从 GitHub 克隆了我的项目，然后运行，npm install但安装时出现很多错误，所以现在我运行gatsby develop并收到以下错误消息。请帮助我

错误 #10226 配置

找不到在“C:\Users\Administrator\Desktop\Projects\IamJude\gatsby-config.js”中声明的“gatsby-plugin-sharp”插件。

尝试在 C:\Users\Administrator\Desktop\Projects\IamJude\plugins\gatsby-plugin-sharp 中寻找本地插件。

尝试在以下路径中查找已安装的软件包：

• C:\Users\Administrator\Desktop\Projects\IamJude\node_modules\gatsby\dist\bootstrap\load-themes\node_modules\gatsby-plugin-sharp
• C:\Users\Administrator\Desktop\Projects\IamJude\node_modules\gatsby\dist\bootstrap\node_modules\gatsby-plugin-sharp
• C:\Users\Administrator\Desktop\Projects\IamJude\node_modules\gatsby\dist\node_modules\gatsby-plugin-sharp
• C:\Users\Administrator\Desktop\Projects\IamJude\node_modules\gatsby\node_modules\gatsby-plugin-sharp
• C:\Users\Administrator\Desktop\Projects\IamJude\node_modules\gatsby-plugin-sharp
• C:\Users\Administrator\Desktop\Projects\node_modules\gatsby-plugin-sharp
• C:\Users\Administrator\Desktop\node_modules\gatsby-plugin-sharp
• C:\Users\Administrator\node_modules\gatsby-plugin-sharp
• C:\Users\node_modules\gatsby-plugin-sharp
• C:\node_modules\gatsby-plugin-sharp

未完成打开并验证 gatsby-configs - 1.329s

错误

上述错误发生在组件中：in CLI (created by ConnectedCLI) in ConnectedCLI in StoreStateProvider in App

React 将尝试使用您提供的错误边界 App 从头开始​​重新创建此组件树。

错误

警告：应用程序：错误边界应实现 getDerivedStateFromError()。在该方法中，返回状态更新以显示错误消息或回退 UI。

C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\node_modules\yoga-layout-prebuilt\yoga-layout\build\Release\nbind.js:53
throw ex; ^

TypeError：无法在 createPendingActivity （C：\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\lib\reporter\redux\utils.js:25:54）读取未定义的属性“活动” :\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\lib\reporter\redux\internal-actions.js:114:51）
在 C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\node_modules\redux\lib\redux.js:483:35 在prematureEnd (C:\Users\Administrator\AppData\Roaming\npm\node_modules \gatsby-cli\lib\reporter\catch-exit-signals.js:39:38) 在 Reporter.panic (C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\lib\reporter\reporter .js:72:42) 在进程中。(C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\lib\index.js:79:21) 在 process.emit (events.js:327:22) 在 processEmit (C:\Users \Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\node_modules\signal-exit\index.js:161:32) 在 process.emit (C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby -cli\node_modules@turist\fetch\dist\sourcemap-register.js:926:21) 在 processEmit [as emit] (C:

我正在使用 gatsby-background-image 来模糊我网站上的全屏图像。在移动版本上，背景图像几乎不可见，因此为了加快速度，我更喜欢那里的背景颜色。在 CSS 中隐藏组件然后更改桌面的可见性不起作用，因为所有子项也都被隐藏了。我找到了有关艺术指导的信息，但我不确定是否应该使用它，因为我没有设置多个背景图像。如果有人可以帮助我，我将不胜感激:)

背景节.js

这似乎是一个比较普遍的问题。我正在尝试生成博客文章页面，但遇到此错误并且页面在加载时显示 404。这意味着它们没有被生成。

这是我的gatsby.node.js文件代码：

还有我的博客文章PostPage.js文件代码：

我正在努力将 csp 元标记添加到 GatsbyJS 网站。任何人都可以帮忙吗？

我在 html.js ( https://www.gatsbyjs.com/docs/custom-html/ ) 中添加了元标记，它在我编译的站​​点顶部的源代码中成功显示，但是 csp 标头是当我运行https://csp-evaluator.withgoogle.com/时找不到。

我也尝试过https://www.gatsbyjs.com/plugins/gatsby-plugin-csp/但这会创建一个完整的错误列表。

任何人都可以帮助我吗？

非常感激，

保罗

我正在使用飞轮（url：xyz.local）的wordpress网站Local。我使用并添加了 gatsby-source-woocommerce 创建了一个新的 gatsby 站点。我还从 woo-commerce 设置中生成了消费者密钥和消费者秘密。我将它们添加到配置文件中的 api_keys 中。

当我运行 gastby develop 时，我得到了这个错误。

有人可以说我是否错过了什么？还是我做错了什么？

因此，我在 React 中创建了一个可重用的 hero 部分，并从数据文件中检索图像，因此更新新图像所需要做的就是更新我的数据文件。我正在尝试将此组件转换为 Gatsby，但我不确定如何使用我的数据文件实现他们的图像插件。

我的图像组件使用此代码 rn 返回我的所有图像

下面是我试图转换为使用 gatsby 的 React 代码

我的数据文件只是一个链接我要使用的图像的对象

现在，我只是传入组件上的道具

然后在我的主页组件中，我会重用组件，但是切换使用哪个数据文件，所以我得到了不同的图像

所以现在，我的组件将显示 img'../../images/profile.jpg'并且第二部分将显示 house.jpg 图片，因为我在我的数据文件中进行了硬编码，但是对于 Gatsby，我将如何使用他们的图像组件复制相同的方法？

我将如何在 gatsby 中编写我的图像组件，以便能够在我的应用程序中的任何位置传递图像组件，然后添加我想要在最终添加到的组件中使用的任何图像？

我只看过教程，展示了如何将特定图像添加到您的查询或如何一次显示文件夹中的所有图像，但还没有看到任何关于通过数据文件传递它的内容

我正在努力使用 Gatsby-image 来为不同的分辨率提供正确的图像尺寸。我有一个大小为 1920x367（宽 x 高）的图像，当窗口大小很小（例如移动设备）时，问题是可见的，因为 gatsy-image 使用 490x92 的图像来覆盖 437x354 的容器。

当窗口大小很大时，您可以在此处看到图像。当窗口大小较小时。

GraphQL 查询：

盖茨比图片：

相关CSS：

问题：如何避免请求大小为 490x92（相同的初始纵横比）的图像，而是提供一个可以填充 437x354（我想要裁剪或裁剪，但不放大）而不拉伸高度的图像。

我已经尝试过的：

1. 我尝试在 gatsby 查询中使用 FILL 来克服纵横比约束，但这并没有成功。
2. 使用presentationSize。

谢谢你的回答。

编辑：找到的唯一一种解决方案是创建一个具有尺寸的方形图像max(width, height)，但在我的情况下始终是宽度。通过这种方式，我可以通过低分辨率和高分辨率（例如移动和桌面）获得良好的质量，但我浪费了太多资源：

• 生成的桌面分辨率图像为 1920x1920，但容器尺寸为 1920x367。
• 移动分辨率不是那么不平衡，但仍然需要更大的高度。

我确信我遗漏了一些东西，因为仅仅创建一个响应式的宽英雄图像并不难。

编辑 2：如果我在 Firefox 中使用响应式设计模式切换到移动分辨率，我无法理解为什么图像质量很好，但是如果我使用与以前的移动设备相当的分辨率但没有响应式设计模式，质量就不好。

我正在测试 Gatsby 和 WP 如何一起工作，并检查了来自官方插件文档的示例（Github 上的 Wordpress 示例）

我使用MAMP在本地托管，端口设置为80 和 3306。

我知道错误出现在 baseUrl 上的 gatsby-config.js 中，因为我试图将其更改为虚拟网站（实时）并且问题已解决。所以我猜想在尝试从 localhost 获取 WP 数据时出了点问题。这是我的 gasby-config.js 文件：

这是我在终端中遇到的错误：

我尝试过的：

• 将 MAMP 上的端口更改为默认端口（Apache：8888，Nginx：7888，MySQL：8889）但我根本无法打开 m WP 站点（在搜索栏中键入 localhost:8888 时出现服务器错误）
• 将 baseUrl 更改为虚拟实时网站：问题已解决，但我需要它在 localhost 上工作
• 将协议更改为 http（而不是 https），因为我在 Stack 上阅读了类似的线程，但我仍然收到相同的错误
• 使用 Flywheel 将我的 WP 站点迁移到临时域并改用那个 baseUrl（它变成了 testSite123.flywheelsites.com），但同样的错误。

我觉得有点别无选择，欢迎任何想法！

我正在为 gatsby 开发我的第一个自定义源插件，但我现在卡住了..

它的工作到目前为止，我得到了我需要创建节点的数据，但不是所有数据。

我从 api 得到的响应看起来像这样

sub但是有了所有的教程，我“只能”获得一个节点section2

如何获得 1 个节点，其中包含所有数据？