Gatsby中Markdown使用HTML img标签时src路径异常问题咨询

问题原因 #

Gatsby 默认的 Markdown 解析规则仅对原生 Markdown 图片语法的路径做转换处理，内嵌 HTML 标签的 src 属性不会被纳入默认路径解析范围，因此会按照 Markdown 文件的相对路径生成错误路径。

以下是两种满足「在Markdown内配置、支持设置33%宽度实现图文并排」需求的解决方案： #

方案1：原生Markdown扩展属性（推荐，无需写HTML标签） #

通过 gatsby-remark-attr 插件给原生Markdown图片添加自定义样式，路径可以自动正常解析：

1. 安装依赖：

npm install gatsby-remark-attr --save

2. 修改 gatsby-config.js 配置：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [`gatsby-remark-attr`],
      },
    },
  ],
}

3. Markdown中直接用原生语法加属性：

![Tux, the Linux mascot](/img/DSC_0575.jpg){style="width:33%; float:left; margin:0 1rem 1rem 0"}

该写法可以直接实现33%宽度、图文并排的布局，不需要写HTML标签。 #

方案2：兼容HTML img标签的配置 #

如果需要使用HTML的img标签，安装gatsby-remark-copy-linked-files插件处理HTML中的图片路径：

1. 安装依赖：

npm install gatsby-remark-copy-linked-files --save

2. 修改 gatsby-config.js 配置：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-copy-linked-files`,
            options: {
              extensions: [`jpg`, `jpeg`, `png`, `gif`],
            },
          },
        ],
      },
    },
  ],
}

配置完成后，你在Markdown中写的HTML img标签路径会被自动解析正确，直接设置宽度属性即可：

<img src="/img/DSC_0050.jpg" alt="Tux, the Linux mascot" style="width:33%; float:left; margin-right:1rem">

内容的提问来源于stack exchange，提问作者Venkat S. Rao