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