Sergei Orlov's DEV Community Profile

Credit goes to: Eugen Str (Unsplash)

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

Unfortunately, Notion API does not support image blocks for now. For each image you attach, it will return an unsupported block. While we wait for the next update of the API that will, hopefully, fix this issue, we can use good old Markdown to get the image on our websites.

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)

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)

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.


Subscribe to the newsletter!

I don't have comments set up on my blog. But I'd be glad to hear your thoughts on what you've just read. If you would like to discuss something, we can have a chat on Twitter.