1

我正在从 airtable 中提取数据，该数据在其相当长的降价中使用外部 URL，如下所示：

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

但是，当这个构建和渲染时，图像仍然指向外部链接，并没有在本地下载。有没有办法转换传入的 MDX 图像，下载它们，然后更改相应的源以像 Gatsby 的图像那样表现？如果他们能获得 Gatsby 提供的渐进式加载增强等功能，那就太好了。

MDX 中的 Gatsby Static Image(gatsby-plugin-image)此处提供的解决方案不合适，该帖子中的最后一个答案似乎不起作用，但可能暗示了一个可能的解决方案。

我还尝试使用 MDX 提供程序和渲染器来烘焙自己的自定义 MDX 渲染器。如果我希望用户使用一些特殊的反应组件，它工作正常，但显然，当我尝试使用它来拦截img标签并将其替换为 Gatsby时，它会失败StaticImage。这是因为外部 URL 作为道具进来，并且被gatsby静态分析器禁止。

4

1 回答 1

1

啊! 所以这有点冒险。最初gatsby-remark-images-anywhere达到了目标，这让我更接近了，现在看起来图像正在被拾取，但是一旦我升级了 Gatsby 4，事情就坏了。

一位乐于助人的评论者指出了另一个解决方案，gatsby-remark-images-remote。这并非没有问题，但它正在完成这项工作。

所以回顾一下，我使用提到的包来实现我想要的。要获取来自 Airtable 的降价，让它通过 MDX 运行，并且还内联任何外部图像。我的 Gatsby 配置最终是这样的

{
      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`],
      },
    },

由于一些渲染问题，我不得不关闭一些 Gatsby 魔法渐进式加载。该软件包仍有一些问题需要锻炼，但它成功地将我的所有img标签src属性转换为指向 Gatsbystatic文件夹。没有更多的链接被拉扯:)

于 2022-03-01T14:11:00.470 回答