如何在 Gatsby 博客 Mdx 文件中导入图像（用于光滑的轮播）

Question

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

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

但是，我很快遇到了一个限制：目前 mdx 似乎只支持“盖茨比图像”。 例如，如果我把它放在 .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 的承诺：在 markdown 中包含所有组件代码。如何改进我的代码？
2. 在 post/slick-carousel.js 中，您看到我如何生成 Gatsby 图像而不仅仅是图像标签了吗？

非常感谢！

Answer 1

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

=> 长话短说：要在自定义组件中使用 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 团队目前正在修复）。 因此，目前的解决方法是创建一个额外的组件来获取所有资产并仅返回您调用的那个。