问题标签 [gatsby-remark-image]

TL;DR：是否可以使用来自 childImageSharp 的 Gatsby 渲染的 tracedSVG 作为您网站上的实际图片？

长版：

所以，我今天早些时候在一个小型网站上为我的Gatsby演奏会工作，当我在我的机器上托管它时，图片加载得很好，但是当我将项目部署到Github Pages时，图像文件无法加载，只有已加载tracedSVG占位符。

现在我确信有一个解决方案；我还没有调查过。问题是，我有点喜欢那些充满艺术气息的tracedSVG在我的网站上的样子，我想保留它们。当然，我可以保持原样，但是如果有一种适当且更优雅的方式来做到这一点，我很想知道。

我试过了

代替

在 js 文件中，图像和占位符无法加载。

我将 Gatsby 用于我的个人博客。我通过降价文件创建内容，这很有效。我想通过使用降价语法在我的内容中包含图像![My Image](./myImage.png)。

myImage.png与文件位于同一文件夹中.md：

我不知道为什么它不起作用。请问有人给我一个建议吗？

我用这些语法尝试过：

这是我的文件结构

这是我的 gatsby-config.js 文件（顺序相同）：

这是 HTML 输出：

我在我的博客中使用 GatsbyJS，源代码在 GitHub 中，托管在 Netlify 中。整个东西都是开源的，所以如果有帮助你可以在这里查看。

我已经使用 GatsbyJS 快一年了，这个问题一直存在。随机地，featuredimage帖子将消失。一个部署就在那里。接下来就没了。我没有找到任何押韵或原因，而且 Netlify 构建日志中没有任何内容表明问题可能是什么。

知道为什么这会改变不变的内容吗？图像在那里。即使它们没有出现在给定的帖子中，您也可以手动访问它们。但出于某种原因，盖茨比没有表现出来。

这是我的主要博客页面的屏幕截图。这些列出的每一篇文章都有一个特色图片。但是一半没有出现：

此页面的当前链接

我不确定是否应该在此处包含我的 package.json 或 gatsby-config.js。它们在我共享的存储库中，但如果我应该将它们粘贴到这个问题中，我可以。

提前致谢！

我在运行 gatsby build 时收到此错误消息。我的帖子是我使用 GraphQL 获取的降价文件。我不明白这是什么问题。

包.json：

.md 文件：

我正在将 Gatsby Plugin 与其他插件一起用于备注图像。下面提供的包 json。

奇怪的是，构建在 MacOS 上运行良好，但在尝试获取 PNG 图像的元数据时在 Debian docker 容器内失败。gatsby-plugin-sharp 面临这个错误

package.json - 仅包含依赖项

我面临的错误：

围绕该错误没有太多可用的详细信息 - 任何帮助将不胜感激。我觉得这可能是一个 C 库问题，因为 Gatsby 插件是动态构建并利用 C/CPP 库的。

我正在使用 gatsbyjs 应用程序，其中有一些具有以下格式的 .yml 文件：

我的目标是将markdownContent字段的值呈现为 HTML。为此，我首先使用 'gatsby-transformer-yaml' 插件读取这些 .yml 文件的内容，然后使用remark和remark-html将markdownContent字段的值转换为 html。

html 渲染得很好，但是我无法渲染图像（链接为 markdownContent 字段的一部分）（所有图像请求都返回 404）

这种方式甚至可能吗？如果没有，当降价不是来自 gatsby-markdown-remark 时，如何让我的降价图像以 HTML 呈现？

以下是其他对我不起作用的答案：

• gatsby remark 图片不显示图片
• 内联图像未从 GatsbyJS 中的降价文件正文加载
• https://github.com/gatsbyjs/gatsby/issues/6698

正在渲染图像，甚至可以通过 url 访问，但该img src属性没有被重写为正确的静态链接。

在我的降价中

生成的 html

实际图像在浏览器中呈现在http://localhost:8000/static/8edfbf87ca46c4dc31640e0b93494b4f/ced80/palmettos.webp

我的配置：

整个站点在mas-4/standingwater上是开源的。

我已经尝试了我在互联网上找到的所有解决方案，但似乎没有一个解决方案有效，而且他们似乎经常提出片状解决方案。我真的不知道如何调试这个特定的。任何帮助将不胜感激。

因为今天我面临一个问题，我不知道如何解决它。就 React 和 Gatsby 而言，我是个新手。发生了什么，目前我正在开发一个使用 Netlify CMS 运行的网站。在过去的几天里，一切都很好，但是从今天开始发生了一些奇怪的事情。我收到以下错误消息：

我认为它与gatsby-remark-relative-images插件有关，但我不明白，为什么它在前几天有效，而今天无效。似乎也很奇怪的是，当我尝试以编程方式创建页面并为此制作了一个gatsby-node.js文件时，它就开始了。删除该文件后，错误消息继续。我已经在这里和那里尝试过我的config.yml文件并且它再次工作。我再次尝试创建gatsby-node.js文件，问题又回来了。我真的不知道发生了什么。

以下是一些附加文件：

gatsby-config

gatsby-node

index.js

这是我的存储库和当前分支的链接：

https://github.com/M-WRI/hemd-und-fliege-2.0/tree/moritz-dev

我知道我的描述在某些部分可能不那么可靠，但我希望有人可以帮助我。提前非常感谢。

我已经使用Gatsby 入门博客模板设置了我的网站。

在我的 Markdown 文件中，我使用普通的 Markdown 符号来插入带有标题的图像。出于某种原因 - 我认为这是因为gatsby-remark-images插件等。al.-我的图像自动包装在<p>标签中，还有一堆我不明白的东西。

这是 Safari 中的源代码：

我试过研究这个。我知道这是一组更有效地加载图像的功能，因此更好等等。

花哨的功能很好，但我需要将我的图像包装在figure带有figcaption- 而不是标签的<p>标签中。（div带有pfor 标题的 A 当然也可以。）

我如何实现这一目标？

我正在使用降价页面在 Gastby 上生成我的页面。我在 .md 文件中定义图像路径。

{MarkdownRemark.frontmatter__slug}.js

在这里，我需要 og:image 作为由 gastby 生成的 url。但我不能那样做。顺便一提，

返回未定义。所以 getSrc 对我没有帮助。

有没有办法让 og:image 工作？