Как импортировать изображения в файл Mdx блога Gatsby (для гладкой карусели)

Question

Я сейчас пытаюсь настроить блог Гэтсби.

При просмотре do c я наткнулся на Mdx * ​​1004 *, способ использования компонента React в файле Markdown (который кстати, потрясающая концепция!).

Однако я быстро столкнулся с ограничением: кажется, что на данный момент mdx поддерживает только «изображения Гэтсби». Например, если я помещу это в файл .mdx ...

![Chinese Salty Egg](./salty_egg.jpg)

..., этот код сгенерирует изображение Гэтсби. Это здорово, но что теперь, если я хочу генерировать изображения "classi c"? Некоторым библиотекам, таким как React Slick Carousel , нужен простой тег <img>.

Например, следующий код .mdx не будет работать :

# Introduction

import Slider from "react-slick";

export const settings = {
      focusOnSelect: true,
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 1,
      speed: 500
    };

<Slider {...settings}>
    <div>
    <img src={"./salty_egg.jpg"}/>
    </div>
    <div>
    <img src={"./salty_egg_2.jpg"}/>
    </div>
</Slider>

(см. Соответствующую проблему GH здесь )

Единственный способ, которым я нашел , чтобы заставить его работать , это использовать шорткоды и импорт:

index.mdx

---
title: Hello World
date: "2015-05-01T22:12:03.284Z"
path: "/first-post"
---

import image1 from "./assets/slick/salty_egg.jpg";
import image2 from "./assets/slick/salty_egg_2.jpg";

<SlickCarousel
    settings={{
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        speed: 500,
    }}
    images={[
        {
            src: image1,
            alt: "hip",
        },
        {
            src: image2,
            alt: "hop",
        },
    ]}
/>

макет. js

import { MDXProvider } from "@mdx-js/react";
import { Message } from "theme-ui";
import SlickCarousel from "./post/slick-carousel";
const shortcodes = {SlickCarousel };
    const layoutContent = data => (
        <React.Fragment>
            <GlobalStyle />
            <main
                style={{
                    background: `white`,
                }}
            >
                <MDXProvider components={shortcodes}>{children}</MDXProvider>
            </main>
        </React.Fragment>

post / slick-carousel. js

import React from "react";
import Slider from "react-slick";

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

const SlickCarousel = ({ settings, images }) => (
    <Slider {...settings}>
        {images.map((image, i) => (
            <div key={i}>
                <img width="350" src={`${image.src}`} alt={`${image.alt}`}></img>
            </div>
        ))}
    </Slider>
);

export default SlickCarousel;

Мои вопросы:

1. Эта реализация отчасти противоречит обещанию MDX: иметь весь код компонента в уценке , Как я могу улучшить свой код?
2. В post / slick-carousel. js вы видите, как я могу сгенерировать изображение Гэтсби, а не просто тег изображения?

Спасибо большое!

Answer 1

Я действительно нашел ответ на второй вопрос благодаря этому замечательному сообщению от Wesbos.

=> Короче говоря: чтобы использовать изображение Гэтсби в пользовательском компоненте, вы должны создать дополнительный компонент Custom Image. Например:

utils / CustomImage. js

import React from "react";
import { useStaticQuery, graphql } from "gatsby";
import Img from "gatsby-image";

export default function Image({ src, alt }) {
    const { allImageSharp } = useStaticQuery(graphql`
        query {
            allImageSharp {
                edges {
                    node {
                        fluid(maxWidth: 500) {
                            ...GatsbyImageSharpFluid
                            originalName
                        }
                    }
                }
            }
        }
    `);
    const image = allImageSharp.edges.find(
        edge => edge.node.fluid.originalName === src
    );
    if (!image) {
        return null;
    }
    return <Img fluid={image.node.fluid} alt={alt} />;
}

Использование:

post / slick-carousel. js

import CustImg from "../utils/CustomImage";
import React from "react";
import Slider from "react-slick";

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

const SlickCarousel = ({ settings, images }) => (
    <Slider {...settings}>
        {images.map((image, i) => (
            <div key={i}>
                <CustImg src={`${image.src}`} alt={`${image.alt}`} />
            </div>
        ))}
    </Slider>
);

export default SlickCarousel;

=> Длинная история: Гэтсби использует скрытые запросы GraphQL stati c для получения изображений. Для запроса stati c stati c вы не можете передать имя изображения, которое хотите получить (команда Gatsby в настоящее время работает над исправлением). Итак, обходной путь на данный момент заключается в создании дополнительного компонента, который получает все активы и возвращает только тот, который вы вызываете.