问题标签 [gatsby-image]

我正在制作照片库/灯箱，并正在使用 graphql 来管理图片。

我在一个文件夹中有 10 张照片：“1- 图片.png”、“2- 其他东西的图​​片.png”、“3-...”、...、“10- 我的最后一张图片.png”

我正在使用以下代码段按升序排序，

但输出顺序是“1- 图片.png”、“10- 我的最后一张图片.png”、“2- 其他东西的图​​片.png”、...

有没有一种智能的方法可以按字符串开头的数字进行排序？我能想到的最简单的方法是将 1-9 文件重命名为“01-...png”，但我正在尝试对包含 5-150 张照片的数千个文件夹实施此操作，所有这些都使用“1-”命名惯例。

如何对这些照片进行排序，以使“9- Some name.png”列在“10- My last picture.png”之前？

运行npm run deploy（由 组成"deploy": "gatsby build && gh-pages -d public -b master"）后，它成功部署，但图像不存在。我意识到他们在<noscript>标签后面，并且显然缺少工作的路径前缀。这是回购：https ://github.com/daletom/gatsby-universal ，它部署在这里：http ://thedales.me/gatsby-universal/

我确实在我的 gastby-config.js 中添加了路径前缀，我pathPrefix: "/gatsby-universal",尝试运行 gatsby build 然后运行 ​​gatsby build --path-prefix 然后 npm run build （以及许多其他组合，包括路径前缀）

这是当前显示的图像代码：

如果它是 /gatsby-universal/static/image.jpg 那么它实际上会起作用，这就是为什么我认为路径前缀搞砸了

我正在尝试通过构建一个演示博客来学习 Gatsby。我有一个存档组件，我在其中查询博客数据，并且我试图将图像作为道具向下传递，但是，当我尝试访问我的文章组件中的道具时，我不断得到一个TypeError: Cannot read property 'childImageSharp' of null.

这是我的代码：

Markdown 标头如下：

记录的数据：

文章组成：

对于我的 gatsby 项目，我使用 Mdx 和 gatsby-plugin-page-creator 来创建我的页面，而不需要模板特定的查询。

大多数页面在页面顶部都有一个图像，所以我想通过 mdx（frontmatter？）添加它。

我已经尝试过 gatsby-remark-images 方式，但问题在于它仅适用于“html”。目标是添加与“html”分开的图像，这样我就可以在 (pageContext.frontmatter ?) 一侧使用清晰的图像。

在mdx.js文件 a have myfrontmatter中，它有一个图像，但图像不清晰。

有没有办法通过 mdx 创建清晰的图像？有没有想过可能会更好的方法？

提前谢谢！

约斯特

图像1

我的背景图片不加载！谁能告诉发生了什么？是因为盖茨比吗？我应该改用 gatsby-image 吗？

我有以下组件。对于图像，我想使用 gatsby-image 和艺术指导多个图像。gatsby-image上的示例使用单个图像，但是如何将其应用于具有多个图像的组件？

子组件：

页面组件：

来自 gatsby-image 文档的示例：

我有两个降价文件，一个引用其启动图像的相对图像，另一个引用外部图像。

和

我想像这样用 GraphQL 引用这两个图像

有没有办法gatsby-image处理外部图像？或者，是否有一个 gatsby 插件可以做到这一点？

提前致谢！

我正在使用 Gatsby 的 Img 组件，但我无法弄清楚如何正确设置宽度。它似乎有点忽略宽度，只是选择自己的宽度。图像应该正好是 276px，就像在 width 属性中指定的那样，如果需要，应该缩小文本容器。

为什么像显式宽度这样简单的东西不能与 html 一起使用？我错过了什么？

WIP 站点可以在这里找到https://lucid-noether-af1c61.netlify.com/

卡片的html输出（图片和srcset剥离）

我正在尝试查询文件夹中的所有图像，并将它们显示在带有 tailwindCSS 和 gatsby-image 的卡片网格中。我已经能够查询和显示一个图像，但是当我尝试使用图像文件夹执行此操作时，即使查询在 GraphQL 资源管理器中有效，我也会收到错误“TypeError: Cannot read property 'edges' of undefined” . 我已经阅读了文档，查看了其他教程，并且现在尝试了很多不同的方法，但无法弄清楚出了什么问题。任何帮助是极大的赞赏！

我正在使用Gatbsy、Contentful CMS 和Netlify建立一个网站。它看起来很棒并且可以在本地工作，但是我在使用tracedSVG选项的流体图像的生产中遇到了问题。Netlify 部署有时会工作，当我向项目添加更多图像时，现在会不断出现以下错误（并不总是在同一页面中）：

或者有时

在极少数情况下

（最后一个没有意义，因为图像存在于 Contentful 和我的内容模型的必填字段）

如前所述；GraphQL 查询从本地的 Contentful 工作中检索 tracedSVG 图像。我的代码如下：

通过使用 GraphiQL，我发现在本地使用tracedSVG而不是在...GatsbyContentfulFluid_tracedSVG本地也可以工作，但它在生产/Netlify 环境中崩溃是一样的。我考虑使用png图像而不是jpg因为错误表明文件本身有问题，尽管它们在本地渲染得很好，但 png 大小的等价物会减慢网站的速度（100kB 的 jpg 图像在 png 中大约是 900kb）。

是否有人在生产中使用 jpg 图像进行渲染时遇到过同样的问题tracedSVG，如果是这种情况，您是如何解决以阻止经常性崩溃的？谢谢你。