Блог

Главная - Вопросы по программированию - Встроенные изображения Gatsby Markdown

Встроенные изображения Gatsby Markdown

#gatsby #gatsby-image

#gatsby #gatsby-изображение

Вопрос:

Итак, я пытаюсь выяснить, как отображать мои изображения, которые встроены в мой пост в блоге. У меня есть рекомендуемое изображение сверху, которое работает, но я не могу понять, как получить встроенные изображения.

Изображения хранятся в src/images/

office-upgrade.md

 ---
title: "Office Upgrade"
image: ../images/office1.jpg
featured: false
author:
  name: "jrock2004"
date: "2017-08-06"
tags:
  - general
---

So, when I moved into our new house 3 yrs ago, my only requirement was I have my own office. In my last house I was stuck in the basement. When I made videos, I would get the jokes about living in my moms basement. As you can see, all the cords where just all over the place. It was just so bad.

![Nightmare Cable Management](../images/office2.jpg)

Gatsby-config.md

   plugins: [
    'gatsby-plugin-postcss',
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
      },
    },
    'gatsby-plugin-image',
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'images',
        path: `${__dirname}/src/images/`,
      },
      __key: 'images',
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'pages',
        path: './src/pages/',
      },
      __key: 'pages',
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 800,
            },
          },
        ],
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'posts',
        path: `${__dirname}/src/posts/`,
      },
      __key: 'posts',
    },
  ],

component/post/index.tsx

 <article className={`markdown mt-12 mx-auto ${image amp;amp; 'w-11/12'}`}>
  <MDXProvider components={components}>
    <MDXRenderer>{body}</MDXRenderer>
  </MDXProvider>
</article>

Когда я смотрю на DOM, это то, что отображается

 <img src="images/office2.jpg" alt="Nightmare Cable Management">

Что я здесь делаю не так?

Ответ №1:

Изображение под images/office2.jpg автоматически отображается, потому что оно находится под телом markdown. Когда вы делаете:

 <MDXRenderer>{body}</MDXRenderer>

Автоматически он отображает все внутри.

Как вы сказали, у вас есть доступ к каждому отдельному узлу markdown ( title , image , featured , и т.д.), Но вы теряете контроль над элементами тела.

MDXProvider предоставляет набор компонентов настройки для уточнения и переопределения поведения рендеринга по умолчанию:

 import { MDXProvider } from "@mdx-js/react"

const YourH1 = props => <h1 style={{ color: "tomato" }} {...props} />
const YourParagraph = props => (
  <p style={{ fontSize: "18px", lineHeight: 1.6 }} {...props} />
)
const YourImg = props => <figure><img src={props.url} alt={props.alt}></img><figcaption{props.title}/figcaption></figure>


const components = {
  h1: YourH1,
  p: YourParagraph,
  img: YourImg
}

export const wrapRootElement = ({ element }) => (
  <MDXProvider components={components}>{element}</MDXProvider>
)

Как вы можете видеть, это обертывание gatsby-ssr.js и gatsby-browser.js API, и это позволяет настраивать компонент изображения.

MDXProvider изображение, выдает следующее props :

 {
  type: 'image',
  url: 'https://example.com/favicon.ico',
  title: 'bravo',
  alt: 'alpha'
}

Источник: https://github.com/syntax-tree/mdast#image

Метки: