Notion teamspace page images not rendering

[Guilhermo Masid]

Issue: Notion teamspace page images not rendering

Description

Notion introduced a feature called Notion Teamspace, allowing users to create subgroups and manage access to specific pages within those subgroups. However, React Notion does not currently handle images from pages within Teamspace correctly, leading to rendering issues.

Problem

When attempting to display images from pages within Notion Teamspace using React Notion, the images fail to render. This issue specifically affects uploaded images; images such as icons or those selected from Unsplash render correctly.

Solution

To address this issue, a custom function can be implemented to override React Notion's default image URL handling. The following function modifies the image URL parameters to ensure proper rendering within React Notion:

export const toNotionImageUrl: MapImageUrl = (url, block) => {
  let notionUrl = url

  if (!url.startsWith('https://www.notion.so')) {
    notionUrl = 'https://www.notion.so'.concat(
      url.startsWith('/image') ? url : `/image/${encodeURIComponent(url)}`,
    )
  }

  const imageUrl = new URL(notionUrl)

  if (block) {
     // Changed here, to switch from `table=team` to `table=block` in the url
    const table = ['space', 'team'].includes(block.value.parent_table)
      ? 'block'
      : block.value.parent_table
    imageUrl.searchParams.set('table', table)
    imageUrl.searchParams.set('id', block.value.id)
    imageUrl.searchParams.set('cache', 'v2')
  }

  return imageUrl.toString()
}

and used here:

<NotionRenderer
    blockMap={data}
    fullPage
    hideHeader
    mapImageUrl={toNotionImageUrl} // <--- Here
/>

Note: This solution has worked for me, but I cannot guarantee it is the correct one.

Additional Information

This issue affects users who utilize Notion Teamspace and attempt to display images from pages within Teamspace using React Notion. Implementing the provided solution can serve as a temporary workaround until the issue is officially resolved by the React Notion development team.

Links for Reference

• Public Notion URL
• React Notion Render of the Public Notion URL

These links demonstrate that the image works fine in Notion but not in React Notion, highlighting the issue.