Nuxt•2mo ago

Nuxt Image URL encoding issue with app.cdnURL and external ipx.baseURL

I'm facing a specific URL generation issue with @nuxt/image in a setup where my assets and my application live on different domains. My Setup: -Nuxt 3 with Vite. -My application and the IPX server run on https://app.example.com. - My static assets (JS, CSS, and images from the ~/assets folder) are served from a separate CDN at https://assets.example.com. - I'm using an image from the ~/assets directory, like <NuxtImg src="~/assets/my-image.png" />. My nuxt.config.ts :

export default defineNuxtConfig({
  // This tells Nuxt that my assets live on the CDN
  app: {
    cdnURL: 'https://assets.example.com/dist/'
  },

  image: {
    // I've whitelisted my CDN's domain
    domains: ['assets.example.com'],
    
    // I'm explicitly setting the IPX server's location
    ipx: {
      baseURL: 'https://app.example.com/_ipx/'
    }
  },
});

export default defineNuxtConfig({
  // This tells Nuxt that my assets live on the CDN
  app: {
    cdnURL: 'https://assets.example.com/dist/'
  },

  image: {
    // I've whitelisted my CDN's domain
    domains: ['assets.example.com'],
    
    // I'm explicitly setting the IPX server's location
    ipx: {
      baseURL: 'https://app.example.com/_ipx/'
    }
  },
});

The Problem: When Nuxt Image generates the srcset, the source URL from the CDN is not being URL-encoded. Actual (Broken) URL: https://app.example.com/_ipx/[modifiers]/https://assets.example.com/dist/_nuxt/img/my-image.HASH.png Expected (Correct) URL: https://app.example.com/_ipx/[modifiers]/_/[URL_ENCODED_CDN_URL] (e.g., .../_/https%3A%2F%2Fassets.example.com%2F...) What I've Tried: I have confirmed this is not a server configuration issue (like IIS rewrites), as the same broken URL is generated when running npm run preview. I've also tried creating a Nitro server middleware to fix the URL, but it seems requests to the absolute https://app.example.com/_ipx/... path are not intercepted by the local preview server. Is this a known issue for this specific architecture? What is the correct way to configure @nuxt/image when the ipx service and the assets live on different domains? Any help would be greatly appreciated!

5 Replies

kapa.ai•2mo ago

Hi @konsav. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided knowledge sources, here’s what can be determined about your Nuxt Image URL encoding issue with external assets and a custom IPX baseURL: How Nuxt Image Handles External URLs - When using the default ipx provider, Nuxt Image expects local images to be in the public/ directory. Images in assets/ are not processed by Nuxt Image by default, as they are handled by the bundler (Vite/Webpack) and typically end up in the final build output (e.g., under /_nuxt/img/) Get Started: Providers. - For remote images (such as those served from a CDN), you must add the CDN domain to the domains array in your config, which you have done. - The baseURL for the ipx provider can be set to point to your IPX server, as you have configured. URL Encoding Behavior - The documentation shows that when using remote images, Nuxt Image generates URLs like:

  /_ipx/<https://images.unsplash.com/<id>>

  /_ipx/<https://images.unsplash.com/<id>>

or, with an alias:

  /_ipx/unsplash/<id>

  /_ipx/unsplash/<id>

Get Started: Alias - The documentation does not explicitly mention URL encoding of the remote URL segment, but the expected behavior (as you described) is that the remote URL should be URL-encoded when appended to the IPX path. Your Issue - You are seeing URLs like:

  <https://app.example.com/_ipx/[modifiers]/https://assets.example.com/dist/_nuxt/img/my-image.HASH.png>

  <https://app.example.com/_ipx/[modifiers]/https://assets.example.com/dist/_nuxt/img/my-image.HASH.png>

instead of the expected:

  <https://app.example.com/_ipx/[modifiers]/_/https%3A%2F%2Fassets.example.com%2Fdist%2F_nuxt%2Fimg%2Fmy-image.HASH.png>

  <https://app.example.com/_ipx/[modifiers]/_/https%3A%2F%2Fassets.example.com%2Fdist%2F_nuxt%2Fimg%2Fmy-image.HASH.png>

- This suggests that the URL is not being encoded as expected, which breaks the image loading. What the Docs Say - The documentation does not provide explicit guidance or configuration options for forcing URL encoding of the remote URL segment in the generated IPX path. - There is no mention of a known issue or workaround for this specific scenario in the official docs or Stack Overflow posts provided. - The docs do mention that for remote images, you can use the alias option to simplify URLs, but this does not directly address encoding issues Get Started: Alias. Conclusion I'm sorry, but the knowledge sources do not explicitly mention a solution or configuration for forcing URL encoding of remote asset URLs in the IPX path when using a CDN and a custom IPX baseURL. There is also no mention of this being a known issue or a recommended workaround for your architecture. If you have already tried middleware and confirmed the issue is not with your server configuration, you may want to: - Double-check that you are using the latest version of @nuxt/image. - Consider opening an issue on the Nuxt Image GitHub repository with a detailed reproduction, as this may be a bug or an edge case not covered in the documentation. If you need to support this architecture immediately, you might need to implement a custom provider or a build-time script to rewrite the URLs as a workaround, but again, this is not covered in the official documentation. If you have further details or a minimal reproduction, sharing it with the Nuxt team or community may help surface a solution or workaround. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@900420997872767070> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

konsavOP•2mo ago

@kapa.ai My Nuxt App & IPX Server run on Domain A (e.g., https://app.example.com/) My static assets (JS/CSS and images from ~/assets) are on a CDN on Domain B (e.g., https://assets.example.com/) Because the assets are on a CDN, I must use app.cdnURL in my config. And because the IPX server is on a different domain, I must use image.ipx.baseURL. This is my config: // nuxt.config.ts

export default defineNuxtConfig({
  // This is required to make asset paths absolute to the CDN
  app: {
    cdnURL: 'https://assets.example.com/dist/'
  },

  image: {
    domains: ['assets.example.com'],
    
    // This is required to point to the correct IPX server
    ipx: {
      baseURL: 'https://app.example.com/_ipx/'
    }
  },
});

export default defineNuxtConfig({
  // This is required to make asset paths absolute to the CDN
  app: {
    cdnURL: 'https://assets.example.com/dist/'
  },

  image: {
    domains: ['assets.example.com'],
    
    // This is required to point to the correct IPX server
    ipx: {
      baseURL: 'https://app.example.com/_ipx/'
    }
  },
});

The Problem: This combination triggers a bug where Nuxt Image fails to URL-encode the source asset path. I get this broken URL: https://app.example.com/_ipx/f_webp/https://assets.example.com/dist/_nuxt/img/my-image.HASH.png When I expect this correct, encoded URL: https://app.example.com/_ipx/f_webp/https%3A%2F%2Fassets.example.com%2F... The Catch-22 (The Loop): If I remove image.ipx.baseURL, the IPX path is wrong. If I remove app.cdnURL, Nuxt Image thinks the asset is a local file and can't find it. I've confirmed this reproduces in nuxt preview, so it is not a server configuration issue. A Nitro middleware also doesn't seem to work, as the absolute URL request isn't intercepted by the local preview server. Is there any known solution or configuration I'm missing for this specific multi-domain architecture? It feels like I'm stuck in a configuration loop with no escape.

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the provided knowledge sources, your situation—serving assets from a CDN (Domain B) while your Nuxt app and IPX server run on Domain A—does not have a documented, official solution for the URL encoding issue you’re encountering. Key points from the documentation: - When using the ipx provider, remote images (such as those on a CDN) should be referenced by their full URL, and the domain must be whitelisted in the domains array, which you have done Get Started: Providers. - The expected behavior is that remote URLs are URL-encoded in the IPX path, e.g.:

  /_ipx/[modifiers]/_/https%3A%2F%2Fassets.example.com%2F...

  /_ipx/[modifiers]/_/https%3A%2F%2Fassets.example.com%2F...

However, the documentation does not specify how to force or fix this encoding if it does not happen automatically Get Started: Alias. - Setting app.cdnURL tells Nuxt to use the CDN for static assets, and ipx.baseURL points to your IPX server. There is no mention of a conflict or workaround for the encoding issue when both are set useRuntimeConfig: app.cdnURL. - The docs do not mention a way to intercept or rewrite these URLs at runtime or build time in a way that would resolve this specific encoding issue. Summary:
The knowledge sources do not provide a solution or workaround for the URL encoding bug you are experiencing when using both app.cdnURL and image.ipx.baseURL in a multi-domain setup. There is no documented configuration or middleware approach that resolves this specific issue. It appears to be an edge case or bug not covered in the official documentation. Recommendation:
Since you have already confirmed this is not a server configuration issue and that middleware does not help, the best next step is to report this as a bug to the Nuxt Image team, providing your configuration and a minimal reproduction. This will help surface the issue for maintainers and potentially lead to a fix or official guidance. I'm sorry I can't provide a direct solution from the documentation, but your configuration and the resulting issue are not addressed in the current knowledge sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@900420997872767070> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt Image URL encoding issue with app.cdnURL and external ipx.baseURL

Did you find this page helpful?