Nuxt-image IPX not finding pictures in production with SSR (deployed on Google App Engine)

Question

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.com/nuxt/image/issues/757
• https://github.com/nuxt/image/issues/165
• https://github.com/nuxt/image/issues/689
• https://github.com/nuxt/image/issues/354

Pacifically

Did you end up finding a solution? I am facing the same problem 🤔 – Thallium

@Thallium I believe I did at the time, since the pictures are now loading fine. I'll check what my config is and give you an update soon if there's something that has changed, or if it reminds me of how I fixed it. – Springy

I posted an answer below, I hope that can help you ! – Springy

I came to the conclusion that the problem is this one: github.com/nuxt/image/issues/1210 Thanks for your update 👍 – Thallium

Answer 1

As asked, I looked into my code that is now working. I don't remember how exactly I fixed it at the time, but my best guess was that I only had to chage configuration in my deployment file (for Google App Engine in my case). See details below.

I still have the same @nuxt/image version used, same config in nuxt.config and same usage in my Vue files.

The only thing is this handler I have added to Google App Engine config app.yaml in order to serve paths starting with /_ipx with Nuxt server :

  # _ipx prefixed medias handled by Nuxt server
  - url: /(_ipx)(.*\.(gif|png|jpg|ico|txt|webp|webm))$
    script: auto
    secure: always

I had to add it BEFORE this other handler rule, that is handling all images/media by serving them directly from the static folder (not via nuxt>ipx):

  # All other medias (pics, videos, txt)
  - url: /(.*\.(gif|png|jpg|ico|txt|webp|webm))$
    static_files: front/src/static/\1
    upload: front/src/static/.*\.(gif|png|jpg|ico|txt|webp|webm)$
    expiration: 97d
    secure: always

Of course, if you're not using Google App Engine, you will have to adapt to whichever tool / server you are using.

I hope that helps :)

Pacifically

Answer 2

I was facing the same issue. I think the only thing you have do is follow the right steps:

Step1: (update nuxt config file)

• add image in nuxt.config.js

  image: { domains: [process.env.FRONTENDURL] }

• add @nuxt/image in modules section instead of buildModules

Step 2: (tsconfig.json)

• add @nuxt/image to types section

  "types": [ @nuxt/image ]

• this should be put at the end of all the values inside types

Step 3:

• put all the images inside static directory

Step 4:

• update nuxt-image as <nuxt-img src="image path inside static directory" /> ex. <nuxt-img src="helloWorld.jpg"/>

Taken

Note that this is valid only with Nuxt 2 – Des

yeah, rightly mentioned this is an example of nuxt 2. – Taken

@HimanshuKandpal How about nuxt 3 could you provide a solution please ? – Cageling

Answer 3

What you want to do is prerender your routes that use the component. This way these pages, including the generated images are included in your build as static assets. The underlying snippet prerenders the index.vue route and works for me. Hope this helps!

In nuxt.config.ts

  routeRules: {
    '/': { prerender: true },
}

Salot

Answer 4

install missing dependency:

npm i -D sharp

Clough