Image URL from file properties are forbidden to access

[Huxpro]

trafficstars

Is this a known issue?

I'm not ready to publicly share the Notion page yet but the repro is simple:

1. in a table, add a property of type file and upload an image.
2. fetch that property and get the https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ url within it.
3. open the url in browser (or in <img src>) and it will be 403 forbidden.

It seems like the official API is returning the same url except that the url is appended with a bunch of URL param e.g. X-Amz-Credential=... so it returns 200.

I also realized that in-page uploaded image works just fine but the URL encoding is a bit different, it started as https://www.notion.so/image/ and then the AWS url is appended as URL param encoded.

[Huxpro]

It seems like the collections kitchen sink demo renders file properties just fine. Is there any special mapping I needed to do to get those image URL encoded to the AWS expected format?

[Huxpro]

Emm seems like this is related to https://github.com/NotionX/react-notion-x/issues/68 and was fixed by https://github.com/NotionX/react-notion-x/pull/134 ?

[Huxpro]

Oh heck I got it work by manually mapping the notion URL like (https://github.com/transitive-bullshit/nextjs-notion-starter-kit/blob/main/lib/map-image-url.ts) following https://github.com/NotionX/react-notion-x/issues/68#issuecomment-898956871

[Huxpro]

It works but i'm not sure it's the ideal way though :( So I'll keep this issue open to see if there is a second opinion

[transitive-bullshit]

Hmmm, I think you should be able to work with the existing defaultMapImageUrl from react-notion-x.

It will resolve any notion-related links, including signed file URLs, assuming the recordMap has been loaded for the page.

[shongs27]

@Huxpro

Hello I am a student who is working on a blog project using the Notion API.

I want to ask you something because I'm not good enough and I'm studying alone without any questions

I'm experiencing the same problem that I was denied access to the image. Of course, the solution is important, but above all, I would like to ask you how you think about it and approach it.

I think mapImageUrl is the solution, but I didn't understand what you were doing because it wasn't recorded in the official doc. How did you understand how it worked and find a solution?

Did you check the code from beginning to end to know the function of react-notion-x property that is not listed in the official document?

[xiaolongkipsi]

We managed to proxy to our own server