使用 gatsby 的 markdown 中的 img 标签 src 问题答案

【问题标题】：img tag src issue in markdown using gatsby使用 gatsby 的 markdown 中的 img 标签 src 问题
【发布时间】：2021-09-05 22:02:00
【问题描述】：

我在 gatsby 的“static/img/”文件夹中有一张图片。

我创建了一个类似这样的blog_post.md 文件：

<img src="/img/DSC_0050.jpg" alt="Tux, the Linux mascot">

![Tux, the Linux mascot](/img/DSC_0575.jpg)

当它被 gatsby 转换为 html 时，只有 markdown 图像具有正确的路径。

<img src="../../../static/img/DSC_0050.jpg" alt="Tux, the Linux mascot"> <- from img tag

<img src="/img/DSC_0575.jpg" alt="Tux, the Linux mascot"> <-from markdown

需要输入什么才能让 gatsby 获得正确的路径？我尝试将其设置为 ./img/DSC_0575.jpg、../img/DSC_0575.jpg 和 img/DSC_0050.jpg 但我发现输出路径没有变化。

背景资料

我正在尝试对使用 33% 容器宽度的图像进行布局，以便在其旁边放置一些文本。
我希望能够为博客文章执行此操作，因此使用降价会很好。

【问题讨论】：

你缺少开头的斜线
@Sysix 我也试过了...没有帮助。

标签： markdown gatsby

【解决方案1】：

我必须使用 gatsby-remark-images-anywhere 插件才能使用 img 标签。

此外，我不能在 div 标签内使用 img。这仍然不起作用：

<img src="/img/DSC_0050.jpg" alt="Tux, the Linux mascot">

我不得不使用图片标签：

<picture>
  <source srcset="/img/DSC_0050.jpg">
  <img src="/img/DSC_0050.jpg" alt="Tux, the Linux mascot">
</picture>

所以需要同时使用新插件和图片标签。

【讨论】：