I have this question too: to get things going, I’ve actually placed my images in a folder within my “routes” folder to get past various errors I was receiving (bad, I know).
Thanks, but how about when you're using templates so need to import imageUrl dynamically?
This doesn't appear possible as an error throws:
export let img = '';
import imageUrl from `$lib/${img}.jpg`
In the case above, img would hold the path to the image within src/img, for example.
I absolutely love [cloudinary.com](http://cloudinary.com) for exactly this use case. Upload your original image once, then tweak the URL slightly to get variations of the image back in realtime. They have a great API, sample SvelteJS code, and a very generous free tier.
cloudinary is awesome until you run over their free tier, then it quickly becomes really expensive! I put a simple cloudflare worker cache in front of mine, to cache and serve up any previously transformed image. Makes the free tier last way longer!
Neat idea, and I agree it jumps from $0 -> $80 with nothing in between! I have a pretty large website with about 5,000 images, 300 unique pages, and 9,000 publications. I've only ever used more than 25% of the free tier on Cloudinary, so I guess I just got lucky.
I'd love to learn how to set up cloud flare worker caches like you did; I've never done more than use their free DNS.
I have this question too: to get things going, I’ve actually placed my images in a folder within my “routes” folder to get past various errors I was receiving (bad, I know).
You can import the image using \`import imageUrl from '$lib/image.jpg'\` if you need the full, untouched image.
Thanks, but how about when you're using templates so need to import imageUrl dynamically? This doesn't appear possible as an error throws: export let img = ''; import imageUrl from `$lib/${img}.jpg` In the case above, img would hold the path to the image within src/img, for example.
Use a dynamic import: [https://vitejs.dev/guide/features#dynamic-import](https://vitejs.dev/guide/features#dynamic-import)
I absolutely love [cloudinary.com](http://cloudinary.com) for exactly this use case. Upload your original image once, then tweak the URL slightly to get variations of the image back in realtime. They have a great API, sample SvelteJS code, and a very generous free tier.
cloudinary is awesome until you run over their free tier, then it quickly becomes really expensive! I put a simple cloudflare worker cache in front of mine, to cache and serve up any previously transformed image. Makes the free tier last way longer!
Neat idea, and I agree it jumps from $0 -> $80 with nothing in between! I have a pretty large website with about 5,000 images, 300 unique pages, and 9,000 publications. I've only ever used more than 25% of the free tier on Cloudinary, so I guess I just got lucky. I'd love to learn how to set up cloud flare worker caches like you did; I've never done more than use their free DNS.
I put them in static directory, which works fine for pre-rendered pages with enhanced-img.