最近我开始使用 Gatsby,现在我正在尝试使用 MDX,在我的 MDX 文件中,我可以通过 GraphQL 使用 Gatsby 图像,但我想使用 gatsby-plugin-image 中的静态图像,但出现错误像这样:
react_devtools_backend.js:2557 图像未加载https://images.unsplash.com/photo-1597305877032-0668b3c6413a?w=1300 https://images.unsplash.com/photo-1597305877032-0668b3c6413a?w=1300
当我尝试在 .tsx 中实现此图像时,它可以工作,所以我想知道它是否可能。
gatsby 配置
"gatsby-remark-images",
{
resolve: "gatsby-plugin-mdx",
options: {
defaultLayouts: {
default: require.resolve("./src/components/common/Layout.tsx")
},
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {},
},
],
}
},
{
resolve: "gatsby-source-filesystem",
options: {
name: "images",
path: `${__dirname}/src/images/`,
},
__key: "images",
},
然后在 test.mdx 中我尝试使用静态图像,如下所示:
<StaticImage
src={'https://images.unsplash.com/photo-1597305877032-0668b3c6413a?w=1300'}
alt={''}
width={3840}
height={1000}
layout={'constrained'}
/>