.mdx文件中的流体图像

Question

有一些方法使流体图像导入。mdx文件?我有一个基于mdx文件的盖茨比站点，我安装了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-imagesdocs

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