gatsby - 如何在 Gatsby 博客 Mdx 文件中导入图像(用于光滑的轮播)

Question

我目前正在尝试建立一个 Gatsby 的博客。

在查看文档时，我遇到了 Mdx ，一种在 Markdown 文件中使用 React 组件的方法(顺便说一句，这是一个很棒的概念!)。

但是，我很快遇到了一个限制:目前 mdx 似乎只支持“Gatsby images”。例如，如果我将其放入 .mdx 文件中...

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

... 此代码将生成一个 Gatsby 图像。这很好，但现在如果我想生成“经典”图像怎么办？一些图书馆喜欢 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 问题 here )

我发现让它工作的唯一方法是使用 shortcodes和进口:

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

layout.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 的 promise :在 markdown 中包含所有组件代码。我怎样才能改进我的代码？
2. 在 post/slick-carousel.js 中，您看到我如何生成 Gatsby 图像而不仅仅是图像标签了吗？

非常感谢!

Answer 1

感谢 this great post，我实际上找到了第二个问题的答案由 Wesbos 提供。

=> 长话短说:要在自定义组件中使用 gatsby 图像，您必须创建一个额外的自定义图像组件。像这样:

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;

=> 长话短说:在幕后，Gatsby 使用 GraphQL 静态查询来检索图像。静态查询是静态的，您不能传递要检索的图像的名称(Gatsby 团队目前正在修复)。因此，目前的解决方法是创建一个额外的组件来获取所有 Assets 并仅返回您调用的 Assets 。