NuxtImage - Cloudflare
Hello i'm trying to use NuxtImage for the first time with cloudflare. While when in production everything is fine. I'm asking how can i make it works in localhost.
The url of the image in production is:
https://production.url/cdn-cgi/image/w=1024,h=1280,fit=cover/https://backendurl.com/uploads/img/PietroGroff_PLM_jpg_014.jpg
in localhost instead
http://localhost:3000/cdn-cgi/image/w=1024,h=1280,fit=cover/https://backendurl.com/uploads/img/PietroGroff_PLM_jpg_014.jpg and then i get 404 everytime.
Should i do something?
2 Replies
Hi @plcdnl. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
In local dev, the Cloudflare provider won’t work unless it can reach Cloudflare’s Image Transformations service. The provider expects your Cloudflare zone domain and automatically appends /cdn-cgi/image when generating URLs (so in dev it targets localhost, which Cloudflare won’t serve). Configure the Cloudflare provider but test images using a provider that works locally (default ipx) or run against your real domain.
Options:
- Use default ipx locally and Cloudflare in production via env var:
- NUXT_IMAGE_PROVIDER=ipx locally, NUXT_IMAGE_PROVIDER=cloudflare in prod. (Providers intro)
- Configure the Cloudflare provider, but only use it in production: - nuxt.config.ts: image.cloudflare.baseURL = 'https://your-domain.tld' and switch provider by env as above. Cloudflare provider notes explain baseURL and the automatic /cdn-cgi/image path. (Cloudflare provider)
- If you must test Cloudflare URLs, point your app to the production domain (or a staging domain on Cloudflare with Image Transformations enabled). The provider requires “Images > Transformations” enabled, and “Resize Image from Any Origin” for external domains. (Cloudflare provider)
Summary: don’t hit http://localhost:3000/cdn-cgi/image/...; use ipx locally or run against your Cloudflare zone domain with transformations enabled. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
- Configure the Cloudflare provider, but only use it in production: - nuxt.config.ts: image.cloudflare.baseURL = 'https://your-domain.tld' and switch provider by env as above. Cloudflare provider notes explain baseURL and the automatic /cdn-cgi/image path. (Cloudflare provider)
- If you must test Cloudflare URLs, point your app to the production domain (or a staging domain on Cloudflare with Image Transformations enabled). The provider requires “Images > Transformations” enabled, and “Resize Image from Any Origin” for external domains. (Cloudflare provider)
Summary: don’t hit http://localhost:3000/cdn-cgi/image/...; use ipx locally or run against your Cloudflare zone domain with transformations enabled. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@651174257098752000> Kapa.ai is still learning and improving, please let me know how I did by reacting below.