问题标签 [gatsby-image]

我正在用 GatsbyJS 和 graphsql 构建我的网站。在我的项目站点上，我想显示一个带有链接到其他站点的图像的网格。

为此，我需要查询多个图像。我在我的图像文件夹中创建了一个名为“portfolio”的文件夹，我想查询其中的所有图片。

我以前使用过useStaticQuery，但我读到目前只能查询一个实例，所以我尝试这样做，但代码不起作用。有什么帮助吗？非常感谢！

不幸的是，我们使用的是 Gatsby，但放弃了它的许多功能，比如 GraphQL。我想仍然使用 gatsby-image。尽管我无法从调整大小转换中受益，但我希望获得其他好处，例如延迟加载和占位符。有没有办法通过只传递一个 url 而不是传递 GraphQL 查询的结果来做到这一点？

您好，任何使用 gatsbyJS 的人，是否可以使用带有模糊或跟踪视图的 gatsby 图像作为视频海报？

我相信poster只接受一个网址，所以我猜这是不可能的，但我很好奇我是否遗漏了什么。谢谢！

我有很多 Markdown 文件已导入 Contentful，其中包含链接的图像。图片链接到外部网站，如 Imgur 的来源。

我正在尝试像使用Gatsby Image API. 问题在于，由于降价的处理方式，图像都在一个 html 节点内。

使用以下命令在页面上设置降价：

我正在尝试做的事情可能吗？我觉得有一些方法可以链接 Gatsby 插件以从 html 本地下载图像，然后在 GraphQL 中创建节点来处理这个问题，但我不确定。理想情况下，我不想更改降价文件以指向内容资产，因为将来不容易迁移到其他解决方案。

任何帮助，将不胜感激！谢谢

我正在使用gatsby-storyblok-imageGoogle PageSpeed Insights 告诉我：

以下一代格式提供图像！

...我以为 gatsby-image 已经在这样做了？这是否与gatsby-storyblok-image它不做有关？有什么想法可以解决吗？

我想gatsby-image有条件地渲染我的：我想为移动和桌面提供不同的图像。所以我需要把它们换掉。

现在我正在这样做：

其中<Desktop>&<Mobile>是具有display: block / display:none取决于视口的媒体查询的样式组件。

但是：这是这里最有效的解决方案吗？我的解决方案是否总是在后台加载两个图像？

没有gatsby-image，我会这样做：

...但这意味着不要gatsby-image在这里使用-我确实想使用。

我目前正在尝试建立一个 Gatsby 的博客。

在查看文档时，我遇到了Mdx，这是一种在 Markdown 文件中使用 React 组件的方法（顺便说一句，这是一个很棒的概念！）。

但是，我很快遇到了一个限制：目前 mdx 似乎只支持“盖茨比图像”。例如，如果我把它放在 .mdx 文件中......

...此代码将生成 Gatsby 图像。这很棒，但现在如果我想生成“经典”图像怎么办？像React Slick Carousel这样的一些库需要一个简单的<img>标签。

例如，以下 .mdx 代码将不起作用：

（在此处查看相应的 GH 问题）

我发现让它工作的唯一方法是使用简码和导入：

索引.mdx

布局.js

post/slick-carousel.js

我的问题：

1. 这种实现有点违背了 MDX 的承诺：在 markdown 中包含所有组件代码。如何改进我的代码？
2. 在post/slick-carousel.js中，您是否看到我如何生成 Gatsby 图像而不仅仅是图像标签？

非常感谢！

项目描述：使用 Gatsby 创建一个作品集网站来展示我的 JavaScript 项目。

问题：我无法在部署到 github 页面时使用 gatsby-image 加载图像 - 它适用于我的本地计算机。如果我使用 childImageSharp.fixed 它是模糊的，如果我使用 childImageSharp.noBase64 图像根本不会显示。

我试过的：我试过删除我的公共和 .cache 文件夹并重建（很多次） - 没用。我曾尝试使用旧版本的 Gatsby 和 gatsby-images 这不起作用，它似乎破坏了其他东西。我尝试过提高质量，但更改了一些设置，但没有奏效。这些都是我在过去几天阅读的其他 StackOverflow 帖子中尝试过的所有内容。

*注意：我也尝试不使用 Gatsby 图像，即使没有 Gatsby 图像，您也会在我的查询中看到很多其他数据，我无法让图像显示没有损坏。但是使用 gatsby 图像，如我上面所述，它要么是模糊的要么是空白的。

Github 仓库： https ://github.com/mk0b/gatsby-portfolio-site

实时 Github 页面站点： https ://mk0b.github.io/gatsby-portfolio-site/

**关于结构的注释 - 我的 graphQL 查询位于 Projects.js 中，并将所有信息传递给 Project.js，然后使用 gatsby 图像。

感谢您提前提供任何帮助/指导！

所以我可以在本地构建我的 gatsby 项目没问题，但是当 Netlify 尝试构建时，我得到了错误

这基本上只是告诉我我需要在生产模式下构建才能看到完整的错误吗？生产模式很好，因为那是在我的本地计算机上。

我正在使用gatsby-image，gatsby-background-image我听说可能会导致问题？我尝试添加gatsby-remark-relative-images并按照此博客文章中的说明进行操作，但仍然遇到相同的错误

我还为节点版本添加了一个环境变量，它什么也没做，但我在Netlify 和 Gatsby的“逐步”指南中读到它可能很有用

这是 Netlify 给我的整个控制台日志

盖茨比-node.js

降价模板

只需询问您是否想查看任何特定文件

我正在尝试使用Img from 'gatsby-image'. 我正在使用 graphql 从src/images目录中提取图像数据。

查询返回数据，这是控制台输出：

但是图像未呈现到页面。这是组件的代码：