问题标签 [gatsby-image]

好吧，我正在尝试在 netlify 中部署一个网站。它已经在github

当我尝试在 netlify 中部署网站时，它显示错误，但在我的本地计算机上它运行时没有错误

该网站在浏览器 localhost 中运行良好，并且 graphquery 正在根据需要显示数据。我在内容中制作了菜单列表......所以我不得不制作一个 gitignore .env.development 文件，但我在 netlify 构建环境变量中插入了 CONTENTFUL_ACCESS_TOKEN 和 CONTENTFUL_SPACE_ID 。

如果在 localhost 上执行时没有显示错误，我还能做什么？

请帮忙

我有一个图像数组定义在config.js. 使用配置文件时，我无法渲染任何图像，但原始 HTML 渲染工作正常。

配置.js

投资组合.js

我正在使用 gatsby 入门博客模板来创建个人博客。尽管我没有对图像处理进行任何更改，但我已经进行了修改以增强一些功能。

话虽如此，当 createPage 从 Markdown 文件构建日志帖子时，页面上似乎没有呈现图像。

Markdown 文件图片调用

![linksx](./links.jpg) ![links1](../pages/roam-research-intro/links1.jpg)

在这里，我正在尝试图像是否需要与降价文件位于同一文件夹中，或者与页面模板位于同一文件夹中 - 两者都不起作用。

文件

盖茨比配置

结果

我在其他地方看到过这个并尝试了很多东西，但无法让它为我工作。.md 身体照片不会通过 gatsby-remark-images 显示。我也已将所有内容更新到最新版本。

更新现在显示完整的配置文件

配置：

md里面：

我一直在关注本教程https://www.gatsbyjs.org/packages/gatsby-image/#art-directing-multiple-images但普通人不可能编写 50 行代码来添加图像：

我的问题是，你如何保持理智并在 gatsby 中使用图像？

这个例子有很多问题：

• 导入和使用相距甚远，理想情况下应该相近（因此如果从html中删除，需要记得从graphql中删除）
• 样板的数量是巨大的。想象一下，您需要 2 张图片...
• 导入图像时没有自动完成。开发人员真的输入了图像的完整路径吗？这似乎是很多工作。重命名看起来也有风险。（我正在使用intellij。）

对于其他使用打字稿并希望通过仅过滤图像来提高性能的人：

添加源实例名称

和插件配置

E:\Gatsby\ecom-gatsby>gatsby 开发成功打开并验证 gatsby-configs - 0.349s 成功加载插件 - 19.895s 成功 onPreInit - 0.036s 成功初始化缓存 - 0.454s ⠋ 复制 gatsby 文件

错误

未处理的拒绝处理 E:/Gatsby/ecom-gatsby/src/images/gatsby-astronaut.png 失败

原始错误：'E:\Gatsby\ecom-gatsby\node_modules\pngquant-bin\vendor\pngquant.exe' 不是内部或外部命令、
可运行程序或批处理文件。

WorkerError：处理 E:/Gatsby/ecom-gatsby/src/images/gatsby-astronaut.png 失败原始错误：'E:\Gatsby\ecom-gatsby\node_modules\pngquant-bin\vendor\pngquant.exe' 无法识别作为内部或外部命令、可运行程序或批处理文件。

• jobs-manager.js:314 exports.enqueueJob [ecom-gatsby]/[gatsby]/dist/utils/jobs-manager.js:314:23

• task_queues.js:94 processTicksAndRejections internal/process/task_queues.js:94:5

未完成复制 gatsby 文件 - 0.157 秒

有人用过 gatsby-remark-image-attributes 吗？我的图像显示，但样式不起作用。

“这个插件可以处理已经处理的图像（类型：'html'），只要节点对象包含一个属性字段和一个标签的值。” 这是来自文档 - 不确定如何将属性字段添加到节点，这可能是我搞砸的地方。

这是我在 md 文件中的图像：

这是我的配置（我在 Gatsby 网站上的示例中使用它，带有 gatsby-remark-images）：

这里的初学者，我不完全理解gatsby-image。我有一个 Gatsby 模板，它使用 graphql 从内容中获取标题图像。我希望标题图像是流畅的，但我希望它具有max-width图像的原始大小。所以说如果jpg最初是800px，我不希望它超出这个范围。我可以看到 graphql 位有一个 maxWidth 属性，但是每个图像都有不同的最大宽度。我想我必须改变它生成 srcset 的方式，但不确定如何。

在我的模板中，相关位是：

并在回报

输出的代码如下所示：

非常感谢任何帮助，谢谢。

我正在尝试制作一个轮播来显示我所做的项目的一些图像。我知道周围有很多反应轮播组件，所以有人知道可以与 gatsby-image 一起使用的组件吗？

我在 Gatsbyjs 项目中有以下组件：

我将以下道具传递给该组件（abc 虚拟字符串以提高可读性）：

我正在使用 Gatsby 的 Staticquery 加载 3 张图像（街头、休闲、运动），并希望在第二个返回语句中渲染该部分 3 次（每个图像 1 次），每次都动态加载背景图像以及内容。

2 个 console.log() 语句按预期打印出来。

然而，没有任何东西被渲染到屏幕上，我也没有看到任何错误。我究竟做错了什么？

在此先感谢您的帮助