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

app:{
cdnURL:"xxx/xonuxt/"
},
image: {
  domains: ['xxx'],
  provider: 'ipx',
  dir: 'assets/img',
  ipx: {
    baseURL: 'https://xxx/_ipx',
  },
},

app:{
cdnURL:"xxx/xonuxt/"
},
image: {
  domains: ['xxx'],
  provider: 'ipx',
  dir: 'assets/img',
  ipx: {
    baseURL: 'https://xxx/_ipx',
  },
},

In my page

<nuxt-img
  format="webp"
  :src="tripadvisorImg"
  alt="tripadvisor"
  width="196"
  height="36"
  sizes="md:196px"
  densities="1"
/>
<script>
import tripadvisorImg from '@/assets/img/tripadvisor.jpg';
</script>

<nuxt-img
  format="webp"
  :src="tripadvisorImg"
  alt="tripadvisor"
  width="196"
  height="36"
  sizes="md:196px"
  densities="1"
/>
<script>
import tripadvisorImg from '@/assets/img/tripadvisor.jpg';
</script>

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??

Nuxt•9mo ago•

5 replies

konsav

Nuxt Image + CDN + IPX + Hashed Assets

app:{
cdnURL:"xxx/xonuxt/"
},
image: {
  domains: ['xxx'],
  provider: 'ipx',
  dir: 'assets/img',
  ipx: {
    baseURL: 'https://xxx/_ipx',
  },
},

app:{
cdnURL:"xxx/xonuxt/"
},
image: {
  domains: ['xxx'],
  provider: 'ipx',
  dir: 'assets/img',
  ipx: {
    baseURL: 'https://xxx/_ipx',
  },
},

In my page

<nuxt-img
  format="webp"
  :src="tripadvisorImg"
  alt="tripadvisor"
  width="196"
  height="36"
  sizes="md:196px"
  densities="1"
/>
<script>
import tripadvisorImg from '@/assets/img/tripadvisor.jpg';
</script>

<nuxt-img
  format="webp"
  :src="tripadvisorImg"
  alt="tripadvisor"
  width="196"
  height="36"
  sizes="md:196px"
  densities="1"
/>
<script>
import tripadvisorImg from '@/assets/img/tripadvisor.jpg';
</script>

Nuxt Image + CDN + IPX + Hashed Assets

Similar Threads

Nuxt Image + CDN + IPX + Hashed Assets

Similar Threads

Similar Threads

Similar Threads