javascript - Gatsby statisk bild (gatsby-plugin-image) inuti MDX

Nyligen har jag börjat arbeta med Gatsby och just nu testar jag saker med MDX. I min MDX-fil kan jag arbeta med Gatsby Image genom GraphQL, men jag vill använda Static Image från gatsby-plugin-image och jag får felmeddelanden som detta:

react_devtools_backend.js:2557 Bild laddades inte https://images.unsplash.com/photo-1597305877032-0668b3c6413a?w=1300

När jag försöker implementera denna bild i .tsx fungerar det, så jag undrar om det är möjligt eller inte.

gatsby-konfig

 "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",
    },

Sedan i test.mdx försöker jag använda Static Image på det här sättet:

<StaticImage
    src={'https://images.unsplash.com/photo-1597305877032-0668b3c6413a?w=1300'}
    alt={''}
    width={3840}
    height={1000}
    layout={'constrained'}
/>

Svar #1

Du kan inte använda gatsby-plugin-image direkt i ett MDX-dokument. Detta inlägg på Gatsby-bloggen förklarar hur man använder det indirekt genom att skicka in bildreferensgenskaper via din Frontmatter.

Personligen har jag kunnat göra det så här:

Detta exempel laddar bara lokala bilder, se blogginlägget för hur man refererar till fjärrbilder eftersom det är mer komplicerat.

Mallkomponent

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-dokument

---
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])} />

Svar #2

Du kan använda gatsby-remark-images-pluginen med gatsby-plugin-mdx och den hanterar bilderna åt dig.

Installera pluginet, sedan i gatsby-config.js, uppdatera gatsby-plugin-mdx till något liknande detta:

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

Då fungerar bilder som förväntat med ![alt](url)-markdownformatet.

Tyvärr är maxWidth fast över hela webbplatsen vilket inte var idealiskt för mig. Jag använder @bonobolabs/gatsby-remark-images-custom-widths-forken som låter dig specificera bildens bredd i MDX-filen med en HTML-stil img-tagg:

<img src="./image.jpg" alt="My image" width="500px"/>

Jag tror att det bara är 'width' som är den extra egenskapen detta ger dig.

Relaterade artiklar