Использование встроенных изображений с плагином Gatsby mdx

Question

Я извлекаю данные из airtable, который использует внешний URL-адрес внутри своей довольно длинной уценки, что-то вроде этого:

      ...
testing 
<img src="https://via.placeholder.com/150" width="300px" />
...

Однако, когда это создается и визуализируется, изображение по-прежнему указывает на внешнюю ссылку и не загружается локально. Есть ли способ преобразовать входящие изображения MDX, загрузить их, а затем изменить соответствующий источник, чтобы он вел себя так же, как изображение Гэтсби? Было бы неплохо, если бы они также получили прогрессивные улучшения загрузки и т. д., которые предлагает Гэтсби.

Предлагаемые здесь решения Gatsby Static Image(gatsby-plugin-image) внутри MDX не подходят, и последний ответ в этом посте, похоже, не работает, но, возможно, намекает на возможное решение.

Я также пытался использовать провайдера MDX и модуль визуализации, чтобы испечь собственный модуль визуализации MDX. Он отлично работает, если я хочу, чтобы пользователи использовали какие-то специальные реагирующие компоненты, но, очевидно, он терпит неудачу, когда я пытаюсь использовать его для перехвата imgтег и заменить его на Gatsby's StaticImage. Это связано с тем, что внешний URL-адрес используется в качестве реквизита и не допускается статическим анализатором gatsby.

Answer 1

Ах! Так что это было небольшое приключение. Первоначально gatsby-remark-images-where попал в цель, это приблизило меня, теперь казалось, что изображения подхватываются, но как только я обновил Gatsby 4, все сломалось .

Услужливый комментатор указал на другой пакет, который прибил это, gatsby-remark-images-remote. Это было не без икоты , но оно делало свою работу.

Итак, подытоживая, я использовал упомянутый пакет для достижения того, чего хотел. Чтобы получить уценку, поступающую из Airtable, запустите ее через MDX, а также встраивайте любые посторонние изображения. Мой конфиг Гэтсби закончился вот так

      {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: 'gatsby-remark-images-remote',
            options: {
              maxWidth: 300,
              linkImagesToOriginal: false,
              disableBgImage: true,
              backgroundColor: 'none',
            },
          },
        ],
        plugins: [`gatsby-remark-images-remote`],
      },
    },

Мне пришлось отключить прогрессивную загрузку магии Гэтсби из-за некоторых проблем с рендерингом. Пакет все еще имеет некоторые изгибы для тренировок, но он успешно изменил все мои imgтеги srcатрибуты, указывающие на Гэтсби staticпапка. Ссылки больше не тянут ковер :)