Gatsby Remark 图片不适用于内嵌图片

问题描述

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

• gatsby remark images does not display image
• Inline images not loading from body of the markdown file in GatsbyJS
• https://github.com/gatsbyjs/gatsby/issues/6698

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

在我的降价中

![Palmettos](./palmettos.jpg)

生成的html

<img src="./palmettos.jpg" alt="Palmettos"></img>

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

我的配置：

module.exports = {
  siteMetadata: {
    title: "Standingwater",siteUrl: "https://standingwater.io"
  },plugins: [
    "gatsby-plugin-styled-components","gatsby-plugin-image","gatsby-plugin-react-helmet","gatsby-plugin-sitemap",{
      resolve: "gatsby-plugin-react-svg",options: {
        rule: {
          include: /assets/
        }
      }
    },{
      resolve: "gatsby-transformer-remark",plugins: [
        {
          resolve: "gatsby-remark-images",options: {
            maxWidth: 1200,}
        },"gatsby-remark-emoji"
      ]
    },"gatsby-plugin-sharp","gatsby-transformer-sharp","gatsby-plugin-fontawesome-css",{
      resolve: "gatsby-source-filesystem",options: {
        name: "images",path: "./src/images/",},__key: "images",options: {
        name: "pages",path: "./src/pages/",__key: "pages",options: {
        name: "posts",path: "./src/markdown/posts/",__key: "posts",options: {
        name: "projects",path: "./src/markdown/projects/",__key: "projects",options: {
        name: "current",path: "./src/markdown/current/",__key: "current",options: {
        name: "hobbies",path: "./src/markdown/hobbies/",__key: "hobbies",],};

整个网站在 mas-4/standingwater 处是开源的。

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

解决方法

解决方案非常简单：

我的原始配置说

    {
      resolve: "gatsby-transformer-remark",plugins: [
        {
          resolve: "gatsby-remark-images",options: {
            maxWidth: 1200,}
        },"gatsby-remark-emoji"
      ]
    },

但这是错误的。应该说：

    {
      resolve: "gatsby-transformer-remark",options: { // should be wrapped in options
        plugins: [
          {
            resolve: "gatsby-remark-images",options: {
              maxWidth: 5000,withWebp: true,showCaptions: true,quality: 100,},"gatsby-remark-emoji",],}
    },