Nuxt Image + CDN + IPX + Hashed Assets
Hey everyone!
I’m working on a Nuxt 3.15 project using @nuxt/image:^1.10.0 with the ipx provider, and I’ve run into an issue after upgrading from nuxt@3.1 and nuxt-image/edge.
I want to use <nuxt-img> to load locally imported images (e.g. from @/assets/img/...) that get hashed during build (e.g. tripadvisor.CEjUf8Dq.jpg).
These images are served from a CDN (e.g. https://xxx/xonuxt/) after build. I also want IPX to optimize them via /_ipx/ (e.g. /_ipx/f_webp&s_196x36/https://xxx/...).
nuxt.config.ts
In my page
The image gets hashed correctly (e.g. tripadvisor.CEjUf8Dq.jpg) and is available on the CDN at: https://xxx/xonuxt/_nuxt/img/tripadvisor.CEjUf8Dq.jpg
But <nuxt-img> generates a request like this: https://xxx/_ipx/f_webp&s_196x36/https://xxx/xonuxt/_nuxt/img/tripadvisor.CEjUf8Dq.jpg and I get a 404, even though the image exists at that path.
Any idea please??
2 Replies
Hi @konsav. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Your setup and intention are clear: you want to use Nuxt Image with the IPX provider to optimize hashed images built by Nuxt and served from a CDN. However, you’re running into 404 errors when IPX tries to fetch the CDN-hosted, hashed images.
Here’s what’s happening and what the knowledge sources say:
1. Asset Location and IPX Provider
By default, the IPX provider expects local images to be in the
Your current approach is correct in theory, but the 404 likely means IPX cannot fetch the image from your CDN. Double-check CDN permissions and domain whitelisting. If you want to optimize images before uploading to the CDN, use local paths and let Nuxt/Image handle optimization at build time. If you need more advanced workflows (e.g., optimizing already-uploaded CDN images), you may need to use a CDN provider that supports on-the-fly optimization (like Cloudinary, Imgix, etc.), or ensure your CDN allows IPX to fetch images directly see source. If you need further clarification, please provide more details about your CDN setup and deployment process. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
public/ directory, or in a custom directory specified by the dir option. When you import images from @/assets/img/ and use them in your code, Nuxt’s build process hashes and emits them to the .output/public/_nuxt/img/ directory (or similar), and they are served from your CDN at a path like <https://xxx/xonuxt/_nuxt/img/tripadvisor.CEjUf8Dq.jpg> see source.
However, when you use <NuxtImg :src="tripadvisorImg" ... />, the Nuxt Image module tries to optimize the image by passing its full CDN URL to IPX, resulting in a request like:
If IPX is running on your server, it tries to fetch this remote image. For this to work, the domain (xxx) must be in your domains whitelist, which you have set.
2. Why the 404?
- If IPX cannot fetch the image from the CDN (e.g., due to network restrictions, authentication, or the CDN not allowing server-to-server fetches), you’ll get a 404.
- If the image is not present at the expected path at the time of the request, you’ll get a 404.
- If you’re using a custom dir (like assets/img), IPX will look for images there locally, not on the CDN, unless you provide a remote URL as the src see source.
3. Key Points from the Docs
- Local images: Should be in public/ for the default IPX provider. If you use assets/, you must set dir: 'assets/img' and reference images by their filename, not by the hashed path see source.
- Remote images: If you want to optimize images already on your CDN, you must use the full CDN URL as the src and ensure the domain is whitelisted see source.
- Hashed assets: When you import images in your script, Nuxt replaces the import with the hashed public path. This is a remote URL if you set cdnURL see source.
4. What You Can Try
- Ensure the CDN allows server-to-server fetches from your Nuxt server (where IPX runs). If not, IPX cannot fetch and optimize the image.
- Use the correct src: If you want IPX to optimize a remote image, use the full CDN URL as the src and ensure the domain is in domains.
- If you want to optimize local images before upload to CDN, you need to use the local path (before CDN upload), and let Nuxt/Image optimize them at build time, then upload the optimized images to the CDN.
5. Example: Using Remote CDN Images
And in your nuxt.config.ts:
see source
6. If You Want to Use Local Images
- Place images in public/ or set dir to your custom folder.
- Reference them by their local path (not the hashed import).
- Let Nuxt/Image optimize them before uploading to the CDN.
7. Limitation
If your images are only available on the CDN after build (i.e., not present locally at runtime), and your CDN does not allow IPX to fetch them, you cannot use IPX to optimize them on the fly.
---
Summary:Your current approach is correct in theory, but the 404 likely means IPX cannot fetch the image from your CDN. Double-check CDN permissions and domain whitelisting. If you want to optimize images before uploading to the CDN, use local paths and let Nuxt/Image handle optimization at build time. If you need more advanced workflows (e.g., optimizing already-uploaded CDN images), you may need to use a CDN provider that supports on-the-fly optimization (like Cloudinary, Imgix, etc.), or ensure your CDN allows IPX to fetch images directly see source. If you need further clarification, please provide more details about your CDN setup and deployment process. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@900420997872767070> Kapa.ai is still learning and improving, please let me know how I did by reacting below.