Comments (4)
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.
from image.
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 :/
from image.
@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.
from image.
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 π
from image.
Related Issues (20)
- Remote image path to s3 bucket is not working using Nuxt2 HOT 2
- Disable auto-detection of a specific provider HOT 3
- Missing fit modes on cloudinary provider, and existing ones are wrongly mapped HOT 4
- Add provider for h2non/imaginary HOT 1
- Nitro publicAssets 404
- Provider Vercel is ignoring format
- ζε ζδ»ΆεΊεΈιθ―― HOT 3
- IPX modifier background color does not work
- Images aren't being retrieved from Strapi provider when using `nuxt generate` HOT 5
- IPX Internal Server Error HOT 6
- Bunny bugs HOT 2
- IPX_ERROR
- IPX error 500 with `nuxt generate`
- Absolute Cloudinary URLs do not work
- IPX_FILE_NOT_FOUND when using npm run build
- New provider for Filerobot from Scaleflex
- nuxt-image + glob v9.0 break build HOT 4
- NuxtImg with Nuxt 3.12.1 has error about "#imports"
- Uploadcare proxy feature HOT 1
- Uploadcare problem with xxl/2xl screens
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from image.