How to import images within a Gatsby blog Mdx file (for a slick carousel)

Question

I am currently trying to setup a Gatsby's blog.

While looking at the doc I came across Mdx, a way to use React component in Markdown file (which is an awesome concept by the way!).

However, I quickly ran into a limitation: it seems like at the moment mdx only supports "Gatsby images". For example, if I put this in the .mdx file...

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

... this code will generate a Gatsby image. This is great, but now what if I want to generate "classic" images? Some libraries like React Slick Carousel needs a simple <img> tag.

For example, the following .mdx code won't work:

# 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>

(See the corresponding GH issue here)

The only way I found to to make it work is to use shortcodes and imports:

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;

My questions:

1. This implementation kinda defeat the promise of MDX: having all the component code in the markdown. How can I improve my code?
2. In post/slick-carousel.js do you see how I could generate a Gatsby image rather than just an image tag?

Thanks a lot!

Answer 1

I actually found the answer to the second question thanks to this great post by Wesbos.

=> Long story short: to use a gatsby image in a custom component you have to create an extra Custom Image component. Like this:

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} />;
}

Usage:

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;

=> Long story: Under the hood, Gatsby uses GraphQL static queries to retrieve images. A static query being static you cannot pass the name of the image you want to retrieve (the Gatsby team is currently working on a fix). So, the workaround at the moment is to create an extra component which gets all the assets and only return the one that you call.