Adding Image Support with the Official Notion API

Saurish Srivastava / July 24, 2021

3 minutes

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']

https://i.imgur.com/2Fbmqz7.jpg

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.

However, I didn't think that this was enough. I'm awfully lazy sometimes and I don't want to add a photo that's already on the web to Imgur all the time. Is there a way to include more photos without having to add them to Imgur? I tried using Javascript's built in endsWith method and specifying the ending as .jpg, .png, and .gif. We can then utilize Javascript's logical operators (in this case the || 'or' operator) in order to include a variety of different images. Here's an image of our code now. It is also available online at this GitHub link.

https://i.imgur.com/cUrHX1g.jpg

Conclusion

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.

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:

https://i.imgur.com/lNUh0uV.gif

Credit

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.