#NuxtImage - Cloudflare

3 messages · Page 1 of 1 (latest)

ivory nacelle
#

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?

tall lionBOT
#

Hi @ivory nacelle. 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:
  • 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: