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 …



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.


Print Share Comment Cite Upload Translate
APA
Sergei Orlov | Sciencx (2024-03-29T14:41:08+00:00) » Images in a Notion page with gatsby-source-notion-api. Retrieved from https://www.scien.cx/2021/06/10/images-in-a-notion-page-with-gatsby-source-notion-api/.
MLA
" » Images in a Notion page with gatsby-source-notion-api." Sergei Orlov | Sciencx - Thursday June 10, 2021, https://www.scien.cx/2021/06/10/images-in-a-notion-page-with-gatsby-source-notion-api/
HARVARD
Sergei Orlov | Sciencx Thursday June 10, 2021 » Images in a Notion page with gatsby-source-notion-api., viewed 2024-03-29T14:41:08+00:00,<https://www.scien.cx/2021/06/10/images-in-a-notion-page-with-gatsby-source-notion-api/>
VANCOUVER
Sergei Orlov | Sciencx - » Images in a Notion page with gatsby-source-notion-api. [Internet]. [Accessed 2024-03-29T14:41:08+00:00]. Available from: https://www.scien.cx/2021/06/10/images-in-a-notion-page-with-gatsby-source-notion-api/
CHICAGO
" » Images in a Notion page with gatsby-source-notion-api." Sergei Orlov | Sciencx - Accessed 2024-03-29T14:41:08+00:00. https://www.scien.cx/2021/06/10/images-in-a-notion-page-with-gatsby-source-notion-api/
IEEE
" » Images in a Notion page with gatsby-source-notion-api." Sergei Orlov | Sciencx [Online]. Available: https://www.scien.cx/2021/06/10/images-in-a-notion-page-with-gatsby-source-notion-api/. [Accessed: 2024-03-29T14:41:08+00:00]
rf:citation
» Images in a Notion page with gatsby-source-notion-api | Sergei Orlov | Sciencx | https://www.scien.cx/2021/06/10/images-in-a-notion-page-with-gatsby-source-notion-api/ | 2024-03-29T14:41:08+00:00
https://github.com/addpipe/simple-recorderjs-demo