Gatsby:在MDX中添加的图像在加载时没有模糊效果

Question

我正在使用gatsby-plugin-mdx和gatsby-remark-images在MDX中合并图像以用于博客，默认情况下它应该具有Gatsby Image附带的模糊效果

下面是我在gatsby-config.js中配置插件的方法

    {
      resolve: `gatsby-remark-images`,
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [".mdx", ".md"],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 500,
              showCaptions: ["title", "alt"],
              quality: 50,
              withWebp: true,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          {
            resolve: `gatsby-remark-vscode`,
          },
          {
            resolve: `gatsby-remark-copy-linked-files`,
          },
          {
            resolve: `gatsby-remark-smartypants`,
          },
        ],
        plugins: [{ resolve: "gatsby-remark-images" }],
      },
    },

它确实可以将我的图像转换为webp，并使用srcSet和其他工具优化质量，但它没有模糊效果。我想知道在加载Gatsby Image时如何使其变得模糊

Answer 1

您是否遵循了the docs中的说明

备注图像需要指向磁盘上的任何位置，gatsby-

- gatsby-source-filesystem需要既是gatsby-plugin- own的子插件，也是插件数组中的字符串条目，并且可以单独包含gatsby-plugin-sharp。

module.exports = {
  plugins: [
    `gatsby-plugin-sharp`,
    `gatsby-remark-images`,
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1035,
              sizeByPixelDensity: true,
            },
          },
        ],
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages`,
      },
    },
  ],
}

在您的gatsby-config.js中，看起来您缺少gatsby-plugin-sharp，可能还缺少gatsby-source-filesystem (如果图像来源，您的配置中可能已经有它)。

您还将在gatsby-plugin-mdx中的options下解析gatsby-remark-images插件，但它应该只在主plugins数组中和gatsbyRemarkPlugins下。