问题标签 [gatsby-image]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - 推断基于 gatsby-image 的高度和纵横比的宽度
我定义了一个Imgwith gatsby-image，除非我为图像指定特定的宽度和高度，否则图像不会出现。这是一个有效的例子，但尺寸不完美。
我想只指定一个维度，并从图像的纵横比推断出另一个维度，这样我就可以做这样的事情。
使用此组件，我的宽度设置正确，但高度为 0。有没有办法指定一个维度的大小，gatsby-image并通过纵横比推断另一个维度？
旁注：根据宽度和纵横比推断高度没有问题。
css - 创建一个不透明/透明的 gatsby-background-image
CodeSandbox：https ://codesandbox.io/s/awesome-gagarin-bss0k?file=/src/pages/index.js
使用gatsby-background-image，我想要一个透明的背景图像。
内联样式不起作用。用我想要的不透明度来分配一个类是行不通的。
将不透明度设置为!important有效，但背景图像的所有子项也都是透明的。我只希望背景图像是透明的。
我尝试将所有的孩子分配.bgImage为不透明，但它不起作用，它们仍然是透明的。
如果我在浏览器中进入我的 html 并将伪类编辑为
但是我将如何在代码中做到这一点？
gatsby - 如何使用 gatsby-image 和 contentful
我正在尝试处理 Gatsby 项目中的视网膜图像。我的内容提供商是 Contentful。我正在上传 2x 图片。我目前正在使用 Gatsby-images 插件。要获得我正在使用的正确图像：
我还使用了应该处理视网膜图像的标签。
但是..在一天结束时。我得到错误的图像。
我得到了 800w，所以看起来我在图像后面得到了一个断点。
reactjs - 如何在 Gatby 图像上设置 srcSetBreakpoints
我目前正在努力提高页面速度。来自 Google 的反馈之一是适当大小的图像。我使用 ContentFul 作为图像提供者。我正在寻找一种管理 srcSetBreakpoints 的方法。我添加了 maxWidth 和 Quality，但 Goggle 仍在向我显示正确尺寸的图像。所以我正在考虑管理断点。有什么方法可以添加到 contentFul 查询中？
gatsby - Gatsby Image - 可以用填充摆脱空 div 吗？
我使用的砌体系统不适用于 Gatsby Image，但适用于常规 jpg 和 gif。
我 99% 确定这是因为当我使用 Gatsby's 时插入了这个带有填充的空 div，<Img>这里的第二行：
当我在检查员视图中删除它时，砌体工作正常。有没有办法从插入中省略它？
javascript - 使用 gatsby-image 插件优化所有博客文章图片
我想知道是否有可能默认为博客文章启用所有图片的gatsby-image插件，我可能有超过 1 张图片。
这是我的博客文章使用图像的方式：
- 一张特色图片，它是 frontmatter 的一部分（我可以通过 GraphiQl 查询进行管理）
- 并且博客文章的所有其他图像都使用transformer-remark-plugin内联
我需要关于 #2 的帮助，以便为博客文章的所有图像启用 gatsby-image 插件。
博文模板
前线
graphql - 如何将 gatsby-image 与对象数组一起使用？
如何将 gatsby-image 与对象数组一起使用？
例如我有这个：
文件位于文件夹 /src/images
我想使用盖茨比图像进行优化
我的问题是我不明白如何进行 GraphQL 查询。我从一个对象中获取文件名，我想加入 GraphQL 查询中的路径。
谢谢。
这是一个代码框，可以帮助您更好地理解我想要做什么 https://codesandbox.io/s/summer-hooks-im9q7?file=/src/components/image.js
javascript - Gatsby 似乎需要任何其他框架 10 倍的努力来添加一个图像：我不理解什么？
这是现有任何其他 Javascript 框架中单个图像的代码：
...可能带有一些样式。
这是 Gatsby 中单个图像的代码（基本上是从 Gatsby Image 文档页面复制的，https://www.gatsbyjs.org/docs/gatsby-image/ ...这只是一个简单的示例）：
天哪，我应该为我网站中的每张图片编写所有代码（好吧，我不必重复导入，但仍然如此）？！？
这不可能是正确的，所以很明显我不明白一些事情。有人可以澄清一下我对盖茨比的了解吗？
如果真的需要这么多代码才能将一张图片添加到网站，那么 Gatsby 肯定是有史以来开发速度最慢的框架（但从它的流行度来看，我不敢相信这是真的）。还是大多数 Gatsby 网站只使用很少的图片？
javascript - 使用 ReactDOMServer.renderToString 将 gatsby-image 注入从 markdown 创建的 html
我正在尝试将一些图像注入从 Markdown 创建的页面中。我正在尝试使用 ReactDomServer.renderToString()
img 显示为黑框，如果我右键单击图像，我可以在新选项卡中打开它，该选项卡会显示应有的图像。
reactjs - AWS AppSync 将 Gatsby-Image 流体图像作为外键添加到其他 GraphQL 模型
如何将 gatsby-image 类型添加到 graphQL 模型上的字段，如下所示？
我知道我应该用另一个对象创建一个外键，但是我如何为 gatsby-image 制作另一个模型作为外键附加？！？！
图像的 json 由以下生成：
到底如何，我是否将其添加为 graphQL 模型上的字段，以便我可以执行如下 gatsby 页面查询：
所以返回的 JSON 看起来像：