gatsby - 盖茨比备注图像不适用于内联图像

Question

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

• gatsby remark 图片不显示图片
• 内联图像未从 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",
    },
    {
      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上是开源的。

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

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。