问题标签 [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.
gatsby - 如何自定义图片的publicURL
我正在gatsby使用gatsby-source-strapi.
以下graphql请求返回publicURLa Post。
这个 url 看起来/static/ad7b2564f1eb5bdf96cb081b3b23967c-eeead0eb0feaed6e8ae436e3a38ad5.jpg是一个非常糟糕的 url。
有没有机会在onCreateNode修改这个 url fe ？
reactjs - 从模板中删除图像会导致使用 Gatsby 找不到文件？
当我下载 Gatsby 并从文件中删除模板图像时，我收到错误消息，并且服务器无法工作。当我将图像放回原处时，它再次起作用。我真的不知道这里发生了什么。
为什么没有他们放在那里的图像就不能使用模板，删除图像后它似乎完全崩溃了。
这些是我收到的错误消息：
graphql - 使用 Gatsbyjs 和 GraphghQL 查询在站点中不起作用。他们在测试环境中工作
使用 Gatsbyjs 和 GraphghQL 查询在该站点上不起作用。他们在测试环境中工作。
错误：在文件中找到多个“根”查询：“cUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410”和“cUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410”。只有第一个（“cUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410”）会被注册。
graphql - 如何在不迭代的情况下访问数组中的特定元素？
我有以下文件夹结构
使用以下 GraphQL 查询时..
结果可以通过使用类似的东西来访问<img src={data.file.publicUrl} alt="" />。到目前为止，一切都很好。
但现在我想用一个查询从该文件夹中检索多个图像。所以我想出了以下内容：
伟大的！但是我现在如何可以访问这些图像之一，而无需使用map或迭代结果呢？
我正在寻找这样的东西，这当然不起作用：
<img src={data.file.publicUrl name.eq="pic1"} alt="pic1"/>
也不是这样的：
<img src={data.allFile.nodes.0.publicUrl} alt="pic1" />
我想用它gatsby-image来优化和调整我的图像。这就是我选择 GraphQL 方式而不是直接导入的原因。我在错误的轨道上吗？
graphql - 从 gatsby-plugin-feed 中的 RSS 返回图像
我正在尝试从博客文章的前端返回作者图片。前面的内容是这样构造的；
在 gatsby-config 我有这样的 gatsby-plugin-feed 设置 -
这会导致错误 Error: Field "avatar" of type "File" must have a selection of subfields. Did you mean "avatar { ... }"?
如何更改它以便在 RSS 提要中返回图像 URL？
谢谢
reactjs - Gatsby 图像不适用于 Netlify CMS 中的列表小部件
我对 Gatsby 和 Netlify CMS 网站有一个奇怪的问题。
我正在使用gatsby-remark-relative-images从 Netlify CMS 获取的图像与gatsby-image. 它对于直接位于 frontmatter 内部的图像小部件非常有效。但是，它不适用于列表小部件内的图像小部件。对于直接在 frontmatter 内部的图像，我可以使用 Gatsby's 查询childImageSharp。但是，列表小部件内的图像只返回一个字符串数组，这些字符串是图像的相对路径。
这是我的代码。
配置.yml
盖茨比-config.js
盖茨比-node.js
name: thumbnail但是，我可以使用 正确查询childImageSharp，name: main-images并name: extra-images返回一个字符串数组，但我无法使用 进行查询childImageSharp。
我现在已经在这个问题上花费了相当长的时间。任何帮助将不胜感激。
reactjs - gatsby-image：在 childImageSharp 中看不到图片？
这可能是一个基本问题，但仍然无法确定为什么我只能在此示例 graphql 查询中看到一个文件的概念：
但我可以看到我列出的所有图片：
别人可以我做错了吗？我很确定这是一个配置问题，但不确定可能是什么问题。谢谢！
reactjs - 如何从 Gatsby.js 中的 YAML 数组中获取图像
我正在用 Gatsby.js 开发一个博客
每个帖子都是一个 YAML 文件，其中有一个画廊的数组，如下所示：
在帖子中我有这样的东西：
但是图像没有显示出来，因为它们在构建时没有被处理并放在静态文件夹中。
据我了解，插件“gatsby-plugin-sharp”并没有转换在 YAML 文件的数组中找到的图像，但是当它只是一个图像时它会......
（在某些帖子中有一个这样的字段
main-image: 'path/to/the/image'
然后我可以像这样使用graphql获取：
而对于 'gallery' 数组，不会创建 'fluid' 节点。）
我希望这是有道理的，我意识到我对有些事情有点困惑，我希望你能帮助我理解一些事情。
谢谢，
米
编辑
感谢@Z，我前进了一点。兹拉捷夫。
我将它插入到 gatsby-node.js 中：
现在为画廊数组中的每个图像创建节点。
但是，查询我得到空的图像......
这里有一些细节：
YAML 文件：
这里是 GraphQl 查询：
这里是数据响应：
我想我仍然缺少一些东西......
gatsby - 当我运行 gatsby build 时，gatsby js 有模糊的图像
我有一个需要在内部服务器上运行的站点。我无权访问该站点，我只是要进行 gatsby 构建并将公用文件夹提供给他们。但是我所有的图像都是一团糟。这是正确的方法吗？为什么我的图像模糊
