Images No Longer Working (file.notion.so)

[trevorwhealy]

Description

Images are mostly failing on all of our internal sites that use react-notion-x under the hood, as of last night (Mar 22, 2023). This appears to be a rollout that does not affect all users, yet.

Querying for the data via the official Notion CLI directly seems to consistently yield the previous (and working) URLs (S3 AWS links): https://s3.us-west-2.amazonaws.com/secure.notion-static.com...

The new file URL that is derived from react-notion-x is served from a new domain file.notion.so like so: https://www.notion.so/image/https://file.notion.so/f/s/e09685....

Interestingly, if you click View original within Notion itself on any image you will see a URL of: https://lh6.googleusercontent.com/Pj_n_e.... which seems to indicate a migration from AWS to GCP.

[RichardS0268]

I am facing the same problem. Images on my blog (forked from nextjs-notion-starter-kit) do not show and when I try to access the src from browser it raise {"message":"Something went wrong."}. One example page is https://www.richardsong.space/l2-risk where images in original notion page do not show.

[lucpena]

I'm having the same problem. Can't find a way to fix

[trevorwhealy]

Was able to solve this by using the notion-compat library which is embedded in this lib:

https://github.com/NotionX/react-notion-x/tree/master/packages/notion-compat

Ironically, I actually requested this utility once upon a time:

https://github.com/NotionX/react-notion-x/issues/228

The awesome library author @transitive-bullshit added this utility which essentially uses the official Notion API to create the necessary recordMap prop needed by the react-notion-x component NotionRenderer

I realized that if the official API was returning working images, in theory as long as I could pass that official API response to this renderer component then it should be fine.

Everything is working great now - thanks @transitive-bullshit

[addison-codes]

@trevorwhealy can you outline how you used the notion-compat library to pass the official API response to the renderer?

[hugocxl]

I can confirm that the solution suggested by @trevorwhealy works properly.

In my case meant moving from using notion-client to the official @notionhq/client and using the notion-compat utility provided to keep compatibility.

import { Client } from '@notionhq/client'
import { NotionCompatAPI } from 'notion-compat'

const notion = new NotionCompatAPI(
   new Client({ auth: process.env.NOTION_EXTENSION_TOKEN })
)

Thanks @transitive-bullshit for the work