问题标签 [gatsby-image]

我在 Gatsby 网站上工作，我不断收到“TypeError：无法读取未定义的属性 'childImageFluid'”

我的代码在我的 Project.js 文件中

我在 index.js 文件中设置了 graphql，它将在其中显示，并且一切都在 graphql 中正常工作......

我在 Project.js 文件中所做的一切都在我的 github 中 - https://github.com/matthewbert86/gatsby-site但所有这些代码都在上面的第一个代码部分中。

我正在尝试通过执行以下操作将图像导入 mdx 文件：![alt](image.jpg). 我的 mdx 文件和图像都存储在目录 src、posts、post-1 中。但是，图像不显示。我尝试了许多文件路径，但都没有运气。

我能够显示图像的唯一方法是使用 src 例如![alt](/static/47d93fd9bdeaaf54a7b60d14c66abe5d/48e00/icon.jpg)

以下是我的 gatsby.config 的一部分

我试图用下面的代码从我在 Gatsby 的 S3 Bucket 中提取远程图像。我有一个构建经典 S3Object 的 schema.graphql。但是 Gatsby Node 抛出以下错误。在这个问题上，我已经在文档中待了好几天了，有人能指出我正确的方向吗？我只需要将图像放入 Gatsby 的数据层，这样我就可以使用 Gatsby-image。

我觉得我需要更新 S3Object 以扩展节点接口，我现在正在处理这个问题。

错误：

架构.graphql

盖茨比-node.js

对于那些在这个问题上磕磕绊绊想知道如何提高他们的灯塔分数的人，我在另一个问题上发布了关于这个主题的答案，其中包含许多一般提示。

我正在运行 PageSpeed 洞察，我最大的问题是最大的内容绘制，大约 8-10 秒。下面他们列出了我最大的内容绘画元素

这个元素是一个在背景中跨越我整个网站的图像。它最初是一个 1.2 MB png，我使用...GatsbyImageSharpFluid_withWebp_noBase64maxWidth 为 1950 加载。

这是我如何渲染它的代码

这是静态的graphql查询

我正在寻找扩展gatsby-image组件以使其在语义上正确figure并在其中添加一个<figcaption>。

有一个Tag道具可以将其渲染为figure，但我不知道如何添加孩子。

这是我尝试过的。

Material-ui's Card component can have a CardMedia component as a child that accepts image source as a prop. Gatsby-image on the other hand requires it's own source as a prop(fixed or fluid).

Is there any workaround for this issue?

我有一个 Gatsby投资组合，其中包含大量大型 jpgs/gifs/mp4s，使用react hook masonry。因为它是在列中加载的，所以实际上存在不希望的卡顿加载，其中图像有点碰撞并相互向下推。

我希望 jpgs/gifs/mp4s 在加载时淡入，而不是跳入并推送内容，但我不知道该怎么做，我认为我需要以某种方式对纵横比进行编程。请注意，我不能每次都使用 Gatsby Image 来计算宽高比，因为我还使用了与 Gatsby Image 不兼容的 gif 和 mp4。

下面是我如何使用 graphql从 Gatsby 调用图像，我使用 Netlify CMS 来托管媒体。Gatsby Image 具有仅适用于 jpg 的纵横比功能，但文档很少。我的另一个想法是，也许我需要在 Netlify CMS 中创建一个采用纵横比的字段，但这似乎很笨重。

如果有人有任何提示，我将不胜感激，谢谢！

我正在建立一个 gatsby 网站来展示我的照片。我想要每张照片的全屏页面，照片应该填满页面，但要尊重纵横比。

问题在于，虽然横向拍摄的照片受到了正确的限制，但纵向拍摄的照片会填满所有水平空间，但会溢出垂直空间。

在文档中有声明

如前所述，使用流体类型的图像会被拉伸以匹配容器的宽度和高度

但是，我观察到的行为是它只会拉伸以匹配宽度，而不是高度。

我将我的问题简化为这个小示例，它试图将图像包含在 400x400px 容器中：

在横向示例中，图像被限制为包含 div 的宽度：

在纵向示例中，图像填充了包含 div 的整个宽度，变得太高了：

如何使 Gatsby Image 缩小以限制可用的垂直空间？

ps 示例图像中的圆角是旧解决方案中引导类的残余，但它的存在并不影响所讨论的问题。

我刚刚尝试按照多主题教程中概述的步骤在我目前的 gatsby 安装中安装第二个主题。我在链接新主题的资源时遇到了一些麻烦。因为它存在于 node_modules 中，所以我猜这应该是它应该引用的地方。目前，似乎是在尝试引用第一个主题的主 src 目录。

不知道我在这里到底做错了什么。这是我的 gatsby-config 的副本以供参考，特别是插件部分：

我正在尝试使用下一页上的 Gatsby Img 组件加载图片：

Img 组件没有呈现，我不知道为什么。我已经记录了 graphql 查询，它确实在获取正确的 GatsbyImageSharpFluid 对象。

日志

我错过了一些非常明显的东西吗？

我有 Gatsby-image 在网站的其他部分工作，所以配置没有问题。