Notion s3 url images can't be used

[Pijuli]

Hi!

When trying to get an image from Notion and parse them with IPX provider (irrelevant) I get this message from Nitro when trying to build the full static website:

Skipping prerender of the route "/_ipx/_/https://mybucket.amazonaws.com..." since it exceeds the 255-character limit in one of the path segments and can cause filesystem issues.

[nitro 11:59:20] ├─ /_ipx/_/https://mybucket.amazonaws.com/b91fe70f-e708-482d-8d2a-5d4fbca58fec/347dcb31-e638-48f4-abba-e6a2089015ee/cada-cuanto-me-llegara-la-factura.png%3FX-Amz-Algorithm=AWS4-HMAC-SHA256%26X-Amz-Content-Sha256=UNSIGNED-PAYLOAD%26X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240424%2Fus-west-2%2Fs3%2Faws4_request%26X-Amz-Date=20240424T093454Z%26X-Amz-Expires=3600%26X-Amz-Signature=0216dcd5e028a8ec91d2257b4cbb3a5cbcc8fe282a37b057411cc35ea82a21eb%26X-Amz-SignedHeaders=host%26x-id=GetObject (1215ms) (skipped)

This might be the "issue"
unjs/nitro#757

That being said, I havent found any param to remove the query params so the file is not longer than 255 chars/bytes.

Has anyone been in the same situation?
The reason on using ipx for notion files is that Notion gives you just 1h (3600s) of valid link. That's why we need to parse those pictures

Cheers

[alessandrojean]

Having the exact same issue with the same use-case from Notion.

I tried to circumvent the issue by creating a custom image provider which would call the get a block endpoint and then use it to short the image filenames to something like /notion/${blockId}, but even that can't be done at the moment since providers can't be async (#963).

I guess it would be better to have a proper provider for S3 temporary images, but the provider also accepting asynchronous calls would work as well. Locked into updating my site in this part for now :/

[smilburn1990]

@Pijuli - I'm trying to do a similar thing with my own s3 buckets. Are you using a custom provider for this? Every time I try to call my s3 image path in the nuxt-img tag it prepends /ipx/ and breaks.

[Pijuli]

Having the exact same issue with the same use-case from Notion.

I tried to circumvent the issue by creating a custom image provider which would call the get a block endpoint and then use it to short the image filenames to something like /notion/${blockId}, but even that can't be done at the moment since providers can't be async (#963).

I guess it would be better to have a proper provider for S3 temporary images, but the provider also accepting asynchronous calls would work as well. Locked into updating my site in this part for now :/

There's another workaround I came with. It's not nice, it's not beautiful, but it works for now. Before static generatation or dev run, download all images to your public folder.
i.e. my package.json

{ "name": "my-web", "scripts": { "downloadNotionImg": "node src/notion.js", "start": "npm run downloadNotionImage && npm run dev", "build": "npm run downloadNotionImg && nuxi generate", } }

Then, save the file with the given name from notion, not the url. With that you already retrieved the image. Moving on. When parsing a block or whatever you need to parse, already in the render phase (or data retrieval), use the image name and the path from public, but not the s3 url. That way you have it locally accessed. You won't find the limit when creating the files as you are not using the url to do so.
I told you it's not pretty, but it works in my case. Theres a big table and a bunch of blocks. So not a big deal.

@smilburn1990 same same. You'll have to find a workaround that fits your needs as the one I explained

Until we have a way of hashing the urls to shorten them, I didn't come with a better solution. And I'm not that clever to be able to do a MR with a solution 🤷‍♀️

Have fun with the 255 chars limitation 😅

[alessandrojean]

Before static generation or dev run, download all images to your public folder.

Yeah, I came up with a similar temporary solution in the end, but I wrote a custom Nuxt module to do this, using the Nitro hook nitro:prerender.

The module exports a custom event handler to be used in the API routes which returns which media needs to me downloaded (including videos) and the destination folder. Then, after the route is finished prerendering, it downloads all the media for that route.

It's available here to anyone which would like to take a look.

Until we have a way of hashing the urls to shorten them, I didn't come with a better solution

An alternative would be <NuxtImg/> providing an extra property to provide the saving path, so it would be possible to use the block UUID for example, like /notion-img/${block.id}.${extension}. But hashing would work as well.