Gatsby 如何在盖茨比博客Mdx文件中导入图像（用于光滑的旋转木马）

我目前正试图建立一个盖茨比的博客

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

然而，我很快就遇到了一个限制：目前mdx似乎只支持“盖茨比图像”。 例如，如果我把它放在.mdx文件中

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

。。。此代码将生成一个盖茨比图像。 这很好，但是现在如果我想生成“经典”图像呢？有些库需要一个简单的

（参见相应的GH问题）

我发现让它工作的唯一方法是使用和导入：

index.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>

---
标题：你好，世界
日期：“2015-05-01T22:12:03.284Z”
路径：“/first post”
---
从“/assets/slick/salty_egg.jpg”导入image1；
从“/assets/slick/salty_egg_2.jpg”导入image2；

layout.js

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

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>

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;

从“@mdx js/react”导入{MDXProvider}”；
从“主题ui”导入{Message}；
从“/post/slick carousel”导入滑动转盘；
常量短码={SlickCarousel}；
const layoutContent=数据=>(
{儿童}

post/slick carousel.js

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

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>

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;

从“React”导入React；
从“react slick”导入滑块；
导入“slick carousel/slick/slick.css”；
导入“slick carousel/slick/slick theme.css”；
常量旋转木马=（{settings，images}）=>(
{images.map（（图像，i）=>(
))}
);
导出默认旋转木马；

我的问题是:

这种实现有点违背了MDX的承诺：所有组件代码都在降价中。如何改进代码

在post/slick-carousel.js中，您看到我如何生成盖茨比图像而不仅仅是图像标签了吗

---

非常感谢！

多亏了Wesbos，我才找到了第二个问题的答案

=>长话短说：要在自定义组件中使用盖茨比图像，必须创建额外的自定义图像组件。 像这样：

utils/CustomImage.js

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

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>

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;

从“React”导入React；
从“盖茨比”导入{useStaticQuery，graphql}；
从“盖茨比图像”中导入Img；
导出默认函数映像（{src，alt}）{
const{allImageSharp}=useStaticQuery（graphql`
质疑{
阿利马夏普{
边缘{
节点{
流体（最大宽度：500）{
…盖茨比磁流体
原名
}
}
}
}
}
`);
const image=allImageSharp.edges.find(
edge=>edge.node.fluid.originalName===src
);
如果（！图像）{
返回null；
}
返回
))}
);
导出默认旋转木马；

=>说来话长：盖茨比使用GraphQL静态查询检索图像。静态查询是静态的，您无法传递要检索的图像的名称（盖茨比团队目前正在进行修复）。 因此，目前的解决方法是创建一个额外的组件，该组件获取所有资产并只返回您调用的资产