.mdx 文件中的流体图像

Question

有什么方法可以使导入到 .mdx 文件中的图像变得流畅？ 我有一个基于 mdx 文件发布的 Gatsby 站点，我安装了 gatsby-remark-image-attributes 和 gatsby-remark-images。

{
      resolve: `gatsby-plugin-mdx`,
      options: {
        defaultLayouts: {
          posts: require.resolve("./src/templates/blog-post.js"),
          default: require.resolve("./src/components/layout.js"),
        },
        extensions: [`.mdx`, `.md`],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 966,
              withWebp: true,
            },
          },
          {
            resolve: `gatsby-remark-image-attributes`,
            options: {
              styleAttributes: true,
              dataAttributes: false
            },
          },
          {
            resolve: `gatsby-remark-highlight-code`,
          },
        ]
      },

样式似乎可行，但我在 mdx 文件中传递的图像根本不流畅。

![IO thumbnail](img.jpg#lightbox=true;max-width=270px;margin-right=23px)

有人知道 mdx 文件中是否可以包含流体图像？

Answer 1

添加类似的东西怎么样：

{
  resolve: `gatsby-remark-images`,
  options: {
    maxWidth: 800,
    wrapperStyle: fluidResult => `flex:${_.round(fluidResult.aspectRatio, 2)};`,
  },
}

致谢：gatsby-remark-images docs

免责声明：_ 代表 lodash 依赖项。正如您在package.json (line 15) 中看到的，它是gatsby-remark-images 的依赖项。我不建议安装一个庞大的库，因为lodash 仅适用于这个实用程序，因为它会增加你的包大小。您可以使用一些普通的 JavaScript 方法获得与 _.round 相同的结果，但出于测试目的可能会很有趣，尝试 lodash 以了解使用这种方法是否能够创建流体包装器。