在完成了一些教程之后，我正在使用 Gatsby + Netlify CMS 创建我的第一个站点。但现在我从这个模板Gatsby-London开始。这个模板如何不与 Netlify CMS 集成。我使用它，我得到了它。我所做的唯一一件事就是评论了与缩略图相关的所有内容，因为它会产生一些我将在之后解决的问题，而且我删除了所有博客文章，我只留下了一篇文章。但其他一切都很好。

上传到 Netlify 后，我发现图像存在一些问题。我上传的图片。他们没有反应。但是模板附带的所有原始帖子都是响应式的。此外，我在那篇帖子中添加了一张我没有响应的图片。经过阅读和研究，我发现是引用路径有问题，需要使用相对路径。

所以我按照Issy的教程博客的步骤，它还不起作用，同样的问题。它不会转换图像。然后我尝试使用另一个插件（gatsby-plugin-netlify-cms-paths），但一切都是一样的。

当我使用检查工具检查时，我发现该图像未包含所有 gatsby 类以使图像响应：

第一个<p>是使用 gatsby-image 生成的，因为此图像位于 .md 文件所在的同一文件夹中。第二个<p>是存储在 Netlify CMS 文件夹中的图像static/img

如果有人知道是哪个问题？以及如何解决。我检查了很多来源，但在我的项目中任何东西都有效。

另外，如果您可以检查这是我在GitHub中的存储库

这是我的 gatsby 配置：

盖茨比-node.js

配置.yml

我目前正在努力提高页面速度。来自 Google 的反馈之一是适当大小的图像。我使用 ContentFul 作为图像提供者。我正在寻找一种管理 srcSetBreakpoints 的方法。我添加了 maxWidth 和 Quality，但 Goggle 仍在向我显示正确尺寸的图像。所以我正在考虑管理断点。有什么方法可以添加到 contentFul 查询中？

我想知道是否有可能默认为博客文章启用所有图片的gatsby-image插件，我可能有超过 1 张图片。

这是我的博客文章使用图像的方式：

1. 一张特色图片，它是 frontmatter 的一部分（我可以通过 GraphiQl 查询进行管理）
2. 并且博客文章的所有其他图像都使用transformer-remark-plugin内联

我需要关于 #2 的帮助，以便为博客文章的所有图像启用 gatsby-image 插件。

博文模板

前线

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

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

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

我正在关注 Andrew Mead 在 Gatsby Bootcamp 上的 youtube 教程，并且在 3:10:00 分钟内一切正常，但是一旦我安装gatsby-remark-relative-images和gatsby-remark-images插件并将它们添加到gatsby-config.js文件以显示图像，当我运行时，npm run develop我会收到类似的错误一个如下所示。

下面是我的 gatsby-config.js 文件。

请帮忙！先感谢您。

我在 MDX 文件中有两个场合，我想使用根相对路径而不是相对路径。MDX 页面嵌套很深。所以我最终在许多../../..

文件夹示例是：

前物质图像路径

我按照这个例子。

成分

这样的事情可能吗？

我使用宇航员从基本的默认 gatsby 启动器构建了这个项目

我不知道我做错了什么，因为这个项目与我的另一个项目非常gatsby-node相似gatsby-config。此错误反复在控制台中循环

盖茨比-node.js

盖茨比-config.js

我正在尝试使用 mdx 文件实现内联图像。

但我做不到，没有加载图像。

在这里阅读了一些解决方案后，他们建议gatsby-remark-images在 options.plugins 中的插件数组中添加，如

在我的 mdx 文件中![test image]('./myFirstPost/images/colorcloud.jpg')

但它对我不起作用。任何人都可以帮助我一些指导？

干杯

The Problem

I would like to have the ability to wrap text around images in markdown. I am usin gatsby-remark-images alongside gatsby-transformer-remark. My gatsiby-config.js file is below.

I have set the float property using the wrapperStyle option of gatsby-remark-images. This does get translated into the style for the span containing the image, but the span has no width, so the image is not displayed on the page.

Now, if I open up dev tools and set a width on the span, I get the image.

So, the problem is that I need a way to set the width of the image in markdown and have gatsby-remark-images translate that size onto the span. It would also be nice to be able to choose the float location of the image in the markdown. Are either of these things possible?

Gatsby config

The Markdown

我有一堆降价文件，如下所示，我在其中引用了项目中图像的路径src/images：

以及gatsby-config图像路径所基于的条目：

然后我查询这些 Markdown 文件，它们都在同一个目录中：

TestComponent并通过在节点上映射并将数据作为道具传递来为每个降价文件生成下面的类似内容

问题是 Gatsby 没有拾取build或develop传递中的图像，因此图像被破坏了。这个用例的文档中唯一的解决方案似乎是static目录，但我想将图像保存在src/images. 这可能吗？