MDX 中的 Gatsby 静态图像（gatsby-plugin-image）

Posted 2023-02-19

【中文标题】MDX 中的 Gatsby 静态图像（gatsby-plugin-image）

【英文标题】：Gatsby Static Image(gatsby-plugin-image) inside MDX

【发布时间】：2021-07-17 13:04:51

【问题描述】：

最近我开始使用 Gatsby，现在我正在尝试使用 MDX，在我的 MDX 文件中，我可以通过 GraphQL 使用 Gatsby Image，但我想使用来自 gatsby-plugin-image 的静态图像，我'我收到这样的错误：

react_devtools_backend.js:2557 图片未加载 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'
/>

【问题讨论】：

你能分享完整的test.mdx吗？

@FerranBuireu prnt.sc/11x2tca 仅此代码。静态图片传入 MDXProvider

【参考方案1】：

您可以将gatsby-remark-images 插件与gatsby-plugin-mdx 一起使用，它会为您处理图像。

安装插件，然后在gatsby-config.js 中，将gatsby-plugin-mdx 更新为如下内容：

  resolve: 'gatsby-plugin-mdx',
  options: 
    gatsbyRemarkPlugins: [
      
        resolve: `gatsby-remark-images`,
        options: 
          maxWidth: 900,
        ,
      ,
    ],
    plugins: [`gatsby-remark-images`]
  ,
,

然后图像使用![alt](url) markdown 格式按预期工作。

不幸的是，maxWidth 固定在整个网站上，这对我来说并不理想。我正在使用@bonobolabs/gatsby-remark-images-custom-widths fork，它允许您使用 html 样式 img 标签指定 MDX 文件中的图像宽度：

<img src="./image.jpg"  />

我相信只有“宽度”是它给你的额外属性。

【参考方案2】：

您不能在 MDX 文档中直接使用 gatsby-plugin-image。 This post on the Gatsby blog 解释了如何通过 Frontmatter 传入图像参考道具来间接使用它。

就我个人而言，我可以这样做：

此示例仅加载本地图像，请参阅博客文章了解如何引用远程图像，因为它更复杂。

模板组件

import React from "react";
import  graphql  from "gatsby";
import  MDXRenderer  from "gatsby-plugin-mdx";
import Layout from "../components/layout";

const Game = ( data ) => 
  const  mdx  = data;
  const  frontmatter, body  = mdx;
  return (
    <Layout title=frontmatter.title>
      <span className="date">frontmatter.date</span>
      <MDXRenderer localImages=frontmatter.embeddedImagesLocal>
        body
      </MDXRenderer>
    </Layout>
  );
;

export const pageQuery = graphql`
  query($slug: String!) 
    mdx(slug:  eq: $slug ) 
      slug
      body
      frontmatter 
        date(formatString: "MMMM DD, YYYY")
        title
        embeddedImagesLocal 
          childImageSharp 
            gatsbyImageData
          
        
      
    
  
`;

export default Game;

MDX 文档

---
title: Death Stranding
author: Hideo Kojima
date: 2021-05-06
template: game
embeddedImagesLocal:
  - '../images/20210513035720_1.jpg'
---

import  getImage, GatsbyImage  from 'gatsby-plugin-image';

A great game from Hideo Kojima.

<GatsbyImage alt='Sam in a destroyed mall' image=getImage(props.localImages[0]) />