DEV Community

Cover image for Images in a Notion page with gatsby-source-notion-api
Sergei Orlov
Sergei Orlov

Posted on • Originally published at orlow.dev

Images in a Notion page with gatsby-source-notion-api

The syntax

Simply put this line as text on your Notion page and replace image alt and image source with
something that would work for you. I mean, literally, this will not work, you at least need a real
image source. 👍

![image alt](image source)
Enter fullscreen mode Exit fullscreen mode

If you'd like to find out how to make code blocks (like the one above) with
gatsby-source-notion-api while Notion API still doesn't support them,
here's a rather dirty hack that will help you to do so.

The easiest way - remote images

If an image is already available somewhere online, and you have the URL, simply put it between the
braces and you're good to go.

But the image is on my computer...

In Gatsby, there is a static folder that you can create in the root directory of your project.
Whatever you declare there, will be available publicly. All you need to do is refer to the image as
if it was available at the root of your website.

For instance, if you have an image called puppy.png, you can put it to ./static inside your
Gatsby project, and then refer to it on your notion page as:

![Never lie in the alt text, it's a puppy!](/puppy.png)
Enter fullscreen mode Exit fullscreen mode

Caveat

Since the images are not referenced from a Markdown file, and the path to the image is not
relative - you will need something like
gatsby-remark-images-anywhere so
that they are converted into file nodes and all the gatsby-image magic works with them properly.

Top comments (0)