Using Images

4 August, 2020

Images can be implemented in your posts using one of the following three ways:

1. Using default Markdown syntax

As mdx is a superset of markdown, the default markdown syntax for adding images works well for externals urls.


![Swallow Flying](


Swallow Flying

2. Using default HTML syntax

The HTML <img> tag is also a valid way to add photos to your articles.


<img src="" width="350" className="small-image" alt="Playful Dog" />


Playful Dog

3. Using Gatsby Image

Lastly, you may also use the custom Gastby Image component which I have modified to make it easier to directly insert images. You simply need to add the image to the /src/images folder and you can reference it using the Image component with the fileName prop.


// This must go at the top of the mdx file after the metadata
import Image from "../components/image"

// Image is in /src/images/gatsby-astronaut.png
<Image fileName="gatsby-astronaut.png" className="small-image" alt="Gatsby Astronaut" />