Гэтсби-замечание-атрибуты изображения не работают - PullRequest
Новая
       66

Гэтсби-замечание-атрибуты изображения не работают

1 голос
/ 06 мая 2020

Кто-нибудь использовал атрибуты-изображения-гэтсби? Мое изображение отображается, но стиль не работает.

"Этот плагин может обрабатывать уже обработанные изображения (тип: 'html'), если объект узла содержит поле атрибутов и значение тега." Это из документации - не знаю, как добавить поле атрибутов к узлу, где, возможно, я ошибаюсь.

Вот мое изображение внутри файла md: 

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

Вот моя конфигурация (я использую ее, как в примере на ее странице на сайте Gatsby, с изображениями gatsby-репликации): 

  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`,

1 Ответ

0 голосов
/ 06 мая 2020

Ширина 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`,

Как только вы это сделаете, ваш атрибут нижнего поля изображения будет использоваться как 

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