I'm running into an issue with Nuxt-image plugin on its latest version v0.7.1 : in production, images are not loading via nuxt-image and the default IPX provider.

I struggle to understand if this is this a configuration error, a packaging/deployment issue or a bug from nuxt / nuxt-image / ipx.

Here are details :

In DEVELOPMENT, it runs fine :

• ✅ <nuxt-img> tags replaced replaced by <img> tags with _ipx/ paths and modifiers
• ✅ IPX server/middleware is working and resolving paths starting with /_ipx
• ✅ images through IPX, at paths like /_ipx/f_webp,q_80,s_1024x683/images/photos/my-photo.jpg load well

In PRODUCTION however :

• ✅ <nuxt-img> tags replaced replaced by <img> tags with _ipx/ paths and modifiers
• ✅ IPX server/middleware is working and attempting to resolve paths starting with _ipx
• ❌ images through IPX at paths like /_ipx/f_webp,q_80,s_1024x683/images/photos/my-photo.jpg are not found by IPX, with an error : "Error: Not Found The requested URL /_ipx/f_webp,q_80,s_1024x683/imagesphotos/photo1.jpg was not found on this server."

I have checked that the original images are indeed deployed from my static folder and available at path /images/photos/my-photo.jpg

Here's my config :

package.json :

  "dependencies": {
    "@nuxt/image": "^0.7.1",
    ...
  }

nuxt.config.js :

module.exports = {
  ssr: true,
  ...
  
  modules: [
    '@nuxt/image',
    ...
  ],

  image: {
    presets: {
      avatar: {
        modifiers: {
          width: 300,
          height: 300,
          format: 'webp',
          quality: 80,
        }
      },
      webp: {
        modifiers: {
          format: 'webp',
          quality: 80,
        }
      }
    }
  },
  ...
}

Usage in my Nuxt project's page :

  <nuxt-img preset="webp" src="/images/photos/succes-vente-de-site.jpg" 
    width="1980" height="1320" sizes="sm:100vw md:100vw lg:100vw" loading="lazy" 
    class="rounded-2xl w-auto max-h-80" />

The web app is using SSR and is deployed via Github Actions onto Google App Engine.
I can also share the Github Action file if necessary :)

I've done my research on the topic before posting, only found similar issues but not really my situation :

I'm running into an issue with Nuxt-image plugin on its latest version v0.7.1 : in production, images are not loading via nuxt-image and the default IPX provider.

I struggle to understand if this is this a configuration error, a packaging/deployment issue or a bug from nuxt / nuxt-image / ipx.

Here are details :

In DEVELOPMENT, it runs fine :

• ✅ <nuxt-img> tags replaced replaced by <img> tags with _ipx/ paths and modifiers
• ✅ IPX server/middleware is working and resolving paths starting with /_ipx
• ✅ images through IPX, at paths like /_ipx/f_webp,q_80,s_1024x683/images/photos/my-photo.jpg load well

In PRODUCTION however :

• ✅ <nuxt-img> tags replaced replaced by <img> tags with _ipx/ paths and modifiers
• ✅ IPX server/middleware is working and attempting to resolve paths starting with _ipx
• ❌ images through IPX at paths like /_ipx/f_webp,q_80,s_1024x683/images/photos/my-photo.jpg are not found by IPX, with an error : "Error: Not Found The requested URL /_ipx/f_webp,q_80,s_1024x683/imagesphotos/photo1.jpg was not found on this server."

I have checked that the original images are indeed deployed from my static folder and available at path /images/photos/my-photo.jpg

Here's my config :

package.json :

  "dependencies": {
    "@nuxt/image": "^0.7.1",
    ...
  }

nuxt.config.js :

module.exports = {
  ssr: true,
  ...
  
  modules: [
    '@nuxt/image',
    ...
  ],

  image: {
    presets: {
      avatar: {
        modifiers: {
          width: 300,
          height: 300,
          format: 'webp',
          quality: 80,
        }
      },
      webp: {
        modifiers: {
          format: 'webp',
          quality: 80,
        }
      }
    }
  },
  ...
}

Usage in my Nuxt project's page :

  <nuxt-img preset="webp" src="/images/photos/succes-vente-de-site.jpg" 
    width="1980" height="1320" sizes="sm:100vw md:100vw lg:100vw" loading="lazy" 
    class="rounded-2xl w-auto max-h-80" />

The web app is using SSR and is deployed via Github Actions onto Google App Engine.
I can also share the Github Action file if necessary :)

I've done my research on the topic before posting, only found similar issues but not really my situation :

• https://github./nuxt/image/issues/757
• https://github./nuxt/image/issues/165
• https://github./nuxt/image/issues/689
• https://github./nuxt/image/issues/354

• javascript
• google-app-engine
• vuejs2
• nuxt.js

• Did you end up finding a solution? I am facing the same problem