盖茨比评论图像不适用于内联图像

Question

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

https://github.com/gatsbyjs/gatsby/issues/6698

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

在我的降价中

![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",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "pages",
        path: "./src/pages/",
      },
      __key: "pages",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "posts",
        path: "./src/markdown/posts/",
      },
      __key: "posts",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "projects",
        path: "./src/markdown/projects/",
      },
      __key: "projects",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "current",
        path: "./src/markdown/current/",
      },
      __key: "current",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "hobbies",
        path: "./src/markdown/hobbies/",
      },
      __key: "hobbies",
    },
  ],
};

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

我已经尝试了我在 Internet 上找到的所有方法，并且 none 的解决方案似乎有效，而且它们似乎经常建议不稳定的解决方案。我什至不确定如何调试这个特定的。任何帮助将不胜感激。

Answer 1

解决方案非常简单：

我原来的配置说

    {
      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",
        ],
      }
    },

Answer 2

今天使用 gatsby v4 遇到了这个问题。我的问题是 gatsby-remark-images 没有对某些图像文件进行任何更改。

对我有用的是将带有 .PNG 扩展名的图像（图像和内联降价）更改为 .png 扩展名。

盖茨比评论图像不适用于内联图像

Gatsby Remark Images not working for inline images

gatsby

gatsby-remark-image