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.
Top comments (0)