reactjs - 盖茨比评论图像属性不起作用

Question

有人用过 gatsby-remark-image-attributes 吗？我的图像显示，但样式不起作用。

“这个插件可以处理已经处理的图像（类型：'html'），只要节点对象包含一个属性字段和一个标签的值。” 这是来自文档 - 不确定如何将属性字段添加到节点，这可能是我搞砸的地方。

这是我在 md 文件中的图像：

![01](/NarrativeExport/01_3L8A0607.jpg#margin-bottom=200px;)

这是我的配置（我在 Gatsby 网站上的示例中使用它，带有 gatsby-remark-images）：

  plugins: [
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [

          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1500,
              quality: 100,
              // wrapperStyle: 'margin-bottom:100px' **This also does not work for me
            },
          },
          `remark-image-attributes`,
          {
            resolve: `gatsby-remark-image-attributes`,
            options: {
              styleAttributes: [`margin-bottom`],
            },
          }
        ],
      },
    },
    `gatsby-transformer-sharp`,

Answer 1

gatsby-remark-image-attributes您还需要remark-image-attributes在 gatsby 配置中使用插件才能使其工作的宽度

`gatsby-plugin-sharp`,
{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 1500,
          quality: 100,
        },
      },
      `remark-image-attributes`,
      {
        resolve: "gatsby-remark-image-attributes",
        options: {
          styleAttributes: [`margin-bottom`],
        },
      }
    ],
  },
},
`gatsby-transformer-sharp`,

一旦你这样做了，你的 image margin-bottom 属性将像这样使用

![01](/NarrativeExport/01_3L8A0607.jpg#margin-bottom=200px;)