问题标签 [gatsby-image]

我第一次尝试 GatsbyJs，我看到了 ImageSharp 用于优化图像的功能。

现在，我创建了一个组件，它工作正常，但我想优化代码以添加更多图像。

代码以这种方式组织：我有组件 images.js，在索引页面中导入该组件。此时组件中有2张图片（1.jpg，2.jpg）

我想创建单个组件图像的两个返回，请参见images.js下面的组件代码：

我会在单个代码中使用导出组件图像，例如：

我的代码可以吗？我在 YouTube 上尝试了一些教程，但没有奏效。

我是 Gatsby 的新手，我正在尝试在我的 Gatsby react 应用程序中实现 Gatsby Background-image 组件，从 WordPress 站点查询数据。

文章中的背景图片组件：

当我查看网络开发人员工具时，我可以看到对同一图像的重复请求。

cfa png的重复请求：

我试图了解这是否是预期的。我看到 ImageRefs.js 的发起者。

如果这不是预期的，有人知道我如何解决 dup 请求吗？

这是我在 index.js 中的查询，我获取图像 src 并通过道具将数据向下传递到我的文章组件。

Graphql 查询：

我可能误解了网络面板信息，但这发生在此页面上延迟加载的所有图像上。

这与我将图像 src 传递到我的子文章组件的方式有关吗？

多图像复制：

提前致谢。

我已经在这个问题上苦苦挣扎了几个周末。我正在尝试在我的（第一个）盖茨比网站中构建一个轮播，react-slick但是当我在运行gatsby develop滑块初始化后查看前端但获取输出的标记格式不正确时，导致滑块无法工作。

我像这样在我的页面上调用这个组件，但是页面上呈现的输出如下所示：index.js

从上面的渲染中可以看出，所有单独的图像都渲染为一张幻灯片。我怎样才能解决这个问题？

我不太了解graphql或gatsby，但我相信我的所有图像都通过将它放在我的gatsby-config.js中加载到graphql

然后我试图查询我可以使用的特定图像

这将返回我想要的，但我必须为此查询输入的 id 是7acfccd5-4aef-532b-8889-9d844ae2068b. 如果我把它放在我的代码中，这个 id 甚至会保持不变吗？有没有办法将 id 设置为更有意义的东西？

如果我将查询保存到一个变量data中，事实证明在Netlify data.allImageSharp.edges[0]上为空，而在本地这个值将返回我需要的

我正在寻找查询单个图像的最佳方法。不是多张图片。如果我可以设置自己的 id，那么我可以查询这些。

更新

我在gatsby-source-filesystem 文档中找到了一个示例，但真的不知道如何将它添加到我的代码中

我有我的背景图片，上面覆盖了一些文字。

我正在尝试使文本更小，但是当我使用 CSS 调整文本大小时

它最终调整了整个背景图像的大小

这是Github上的最小可重现示例。

您必须使用yarn installor安装节点模块，npm install然后在浏览器中运行gatsby develop并查看网页localhost:8000

注意：如果您将 textClass='small' 更改为 textClass='big'，请对 textClass='small' 的所有 3 个实例执行此操作以查看大小更改

这是我正在使用的代码

我想在这一点上，我已经看得太久了，可能没有看到明显的东西，但我不明白为什么我的查询没有正确获取背景图像数据，而是显示为空。我正在使用"gatsby-background-image": "^1.1.1"加载在 package.json 中。我在我的 gatsby-config.js 中引用我的图像文件，如下所示：

以及使用它的组件：

我错过了什么？

有一个gatsby 博客，我在其中添加了一个封面图像，该图像可以是图像（我希望它显示为 Gatsby 图像）或 mp4（我希望它显示为 html5 视频）。

问题是，当我查询这个字段时（在我的降价帖子中，cover: x.mp4或者cover: x.jpg），如果它是一个 mp4 并且它没有childImageSharp（错误：）的属性TypeError: Cannot read property 'fluid' of null。

我的查询如下所示：

所以我的目标是拥有某种 JSX，例如：

有任何想法吗？

我正在尝试使用带有打字稿的 Gatsby 创建一个“头像”组件。你的组件应该使用本地图像。我的组件看起来像

我用它来称呼它

<Avatar title={"Avatar"} imageUrl={"../avatar/elements.png"} />

该文件的路径是正确的，但它没有显示出来。我究竟做错了什么？

PS 有没有办法让图像通过 gatsby-image 进行优化？

我在 Gatsby 网站上工作，并从 Sanity.io 采购我的内容。与通过我自己的文件系统获取的图像相比，我从 Sanity.io CDN 返回的一些图像质量显着降低。我认为这与设置的图像尺寸不正确有关，但我无法弄清楚为什么它错误地设置了此图像。我正在尝试使用 gatsby-image 渲染这两个元素。

彼此相邻加载的图像的屏幕截图：

我的 graphQL 查询：

我在哪里渲染这两个图像：

当我检查我的 devtools 中的图像元素时，我可以看到来自 sanity 的图像的currentSrc如下：

看起来这里设置的图像尺寸不正确，因为宽度和高度约为原始图像的 50%。从上面的字符串可以看出，w=150&h=72似乎正在调整图像大小。

最后，在启动 Gatsby 环境时，我在控制台中收到以下警告：

这里有什么不正确的地方，还是我在设置过程中遗漏了什么？作为说明，我已经清除并重新安装了我的节点模块、公共和缓存文件夹。

我为我的 Gatsby 网站添加了一个砖石挂钩，这是一个画廊。在 mp4 和 gif 上效果很好，但是当项目是 Gatsby 图像时，它没有高度。

我可以设置 a height:500px, position:static, and img{object-fit:contain}on gatsby-image-wrapper，但它的比例很奇怪。

我认为这是因为img从 Gatsby Image 渲染出来的position:absolute，object-fit:cover所以砌体钩子不知道它的大小，但我太初学者了，无法弄清楚。

砌体项目中的盖茨比图像如下所示：

非常感谢任何帮助，谢谢