Adding Image Support with the Official Notion API
Saurish Srivastava / July 24, 2021
3 minutes / –––
The Notion team has released image support. Check out the GitHub repository to see how to add official image support.
The current Notion API does not support images. When trying to power a blog, this can be an extreme discomfort – especially as images are the driving factor of most blogs and tutorials.
It's been quite some times since the API has released and we still have not heard from the developer team when – or if – image/video support is coming. I'm notoriously impatient, and with the influx of time that I had during summer, I wanted to explore a method myself.
Enough talking, how was it done?
The essential idea behind this work-around is reliant on one central feature of HTML <img> tags: they not only take paths to local images, but also website links to display images.
In code, this correlates into the following code block and following image (Notion still doesn't support multi-line code blocks 😢):
const imageSources = ['images.unsplash.com', 's3-us-west-2.amazonaws.com', 'imgur.com']
Let's break it down. The first React conditional is questioning whether the input text has a link or not – if it does, we want to move into this nested conditional. The first part of the nested conditional is if the image has a link that is also in our defined array imageSource. If it is, we want to render the image through an <img> tag, which is what the TailwindCSS code does. If the image link is not a part of the imageSource array, then we want to render it as a normal link. This is what the next part of the nested conditional achieves.
There are still a few caveats though. For example, if images end with something other than the extensions provided above, then the image will not be rendered. I did not want to search the entire link for the extensions, because they could be there by chance, or even intentionally in some slugs/URLS.
Note: I have updated my website to use the official Notion API to render images; thus, the below line will not be applicable anymore. I am leaving it just to show the caveats of the design I had thought of.
You are also unable to link defined websites into your posts. For example, if I type in: https://imgur.com/, it will try to render an image, which can be extremely annoying at times.
Even though this is still inefficient compared to official support from the API, this still demonstrates how powerful Notion is/can be. And I can finally embed photos like this:
I want to provide credit to Twan and their Notion-powered blog. It was interesting to see the imageSources workaround and it allowed me to improve it a little bit.