CODEWITHSUNDEEP
javascriptgoogle-app-enginevuejs2nuxt.js
Guillaume Prévost
Guillaume Prévost

Reputation: 413

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

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 :

In PRODUCTION however :

enter image description here

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

enter image description here

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 :

Upvotes: 10

Views: 10720

Answers (4)

Guillaume Pr&#233;vost
Guillaume Pr&#233;vost

Reputation: 413

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 :)

Upvotes: 1

ShCc
ShCc

Reputation: 99

install missing dependency:

npm i -D sharp

Upvotes: -1

erikknorren
erikknorren

Reputation: 17

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 },
}

Upvotes: -1

Himanshu Kandpal
Himanshu Kandpal

Reputation: 37

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"/>

Upvotes: -1

Related Questions