IPX max-age configuration doesn't apply

[yuzu-qroulland]

Hello,

I'm unable to increase the cache max-age of my images.

With the help of #704 , I've tried to define it via the image config with that code but it's not working.

image: {
    ipx: {
      maxAge: 60 * 60 * 24,
    },
  },

I'm using nuxt:3.7.3 and @nuxtjs/image:1.0.0-rc.2

[urbgimtam]

Interested on this too. Not sure if the reproduction helps. It's always giving me a max-age of "31536000", no matter the maxAge value passed in config.

https://stackblitz.com/edit/github-ac11u5?file=app.vue

[Pierre-Saigot]

Same..

[krthr]

Same

[yuzu-qroulland]

Hi everyone,

I'm coming back to you because I've found a solution in the meantime. 🥳

With the following statement the maxAge is well taken into account:

image: {
    ipx: {
        options: {
            maxAge: 31536000,
        },
    },
}

Just need to set the maxAge into an options object. 🧐

However, I don't know whether this is the expected behavior and therefore the documentation is out of date, or whether it's a design error. 👀

[manchenkoff]

@yuzu-qroulland yep, that works! thanks 👍

[rahulkumarsingh73690]

Any update? @yuzu-qroulland

Nothing worked for me

[manchenkoff]

just fyi, since I upgraded to Nuxt 3.8 it works even with default config like

image: {
    quality: 80,
    format: ['avif'],
    ipx: {
        maxAge: 60 * 60 * 24 * 365,
    },
},

[rahulkumarsingh73690]

Thanks @manchenkoff for sharing.

My app is hosted in Digitalocean app platform and this is not working for me

Nuxt - 3.8 Nuxt/image - 1.0.0

[cernymatej]

Now the options key seems to have been removed from IPXRuntimeConfig and it doesn't work at all for me 😕 Nuxt - 3.8.2 Nuxt/Image - 1.0.0

[raphaelbernhart]

For me it is working with the following config:

image: {
        ipx: {
            maxAge: 60 * 60 * 24 * 365,
        },
    },

- Operating System: Darwin
- Node Version:     v18.19.0
- Nuxt Version:     3.9.0
- CLI Version:      3.10.0
- Nitro Version:    2.8.1
- Package Manager:  [email protected]
- Nuxt Image:       @nuxt/[email protected]

[gnidustotalus]

I am currently facing a similar issue, but it seems to be limited to external domains.

Image from external domain

Images from public dir

dependecies

{
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxt/image": "^1.3.0",
    "@nuxtjs/fontaine": "^0.4.1",
    "@nuxtjs/google-fonts": "^3.0.2",
    "@nuxtjs/i18n": "^8.0.0",
    "@nuxtjs/tailwindcss": "^6.10.0",
    "@tailwindcss/forms": "^0.5.7",
    "@vueuse/core": "^10.7.0",
    "@vueuse/nuxt": "^10.7.0",
    "nuxt": "^3.9.3",
    "nuxt-icon": "^0.6.8",
    "nuxt-svgo": "^4.0.0",
    "vue": "^3.4.15",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "@pinia/nuxt": "^0.5.1",
    "@splidejs/vue-splide": "^0.6.12",
    "photoswipe": "^5.4.3",
    "pinia": "^2.1.7",
    "qs": "^6.11.2",
    "vue-multiselect": "^3.0.0-beta.3"
  }
}

nuxt.config.ts

export default defineNuxtConfig({
  image: {
    provider: "ipx",
    ipx: {
      maxAge: 60 * 60 * 24 * 365,
    },
    domains: ["cms.kuvqfitjqf.cfolks.pl"],
    presets: {
      default: {
        modifiers: {
          quality: 90,
          format: "webp",
        },
      },
    },
  },
})

---

I am aware that this functionality was functional in the past. An illustrative example can be found at the following link: https://stackblitz.com/edit/github-ac11u5?file=app.vue.

@pi0 Could you help me solve the problem?

[kytosai]

I am currently facing a similar issue, but it seems to be limited to external domains.

Image from external domain

Images from public dir

dependecies

{
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxt/image": "^1.3.0",
    "@nuxtjs/fontaine": "^0.4.1",
    "@nuxtjs/google-fonts": "^3.0.2",
    "@nuxtjs/i18n": "^8.0.0",
    "@nuxtjs/tailwindcss": "^6.10.0",
    "@tailwindcss/forms": "^0.5.7",
    "@vueuse/core": "^10.7.0",
    "@vueuse/nuxt": "^10.7.0",
    "nuxt": "^3.9.3",
    "nuxt-icon": "^0.6.8",
    "nuxt-svgo": "^4.0.0",
    "vue": "^3.4.15",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "@pinia/nuxt": "^0.5.1",
    "@splidejs/vue-splide": "^0.6.12",
    "photoswipe": "^5.4.3",
    "pinia": "^2.1.7",
    "qs": "^6.11.2",
    "vue-multiselect": "^3.0.0-beta.3"
  }
}

nuxt.config.ts

export default defineNuxtConfig({
  image: {
    provider: "ipx",
    ipx: {
      maxAge: 60 * 60 * 24 * 365,
    },
    domains: ["cms.kuvqfitjqf.cfolks.pl"],
    presets: {
      default: {
        modifiers: {
          quality: 90,
          format: "webp",
        },
      },
    },
  },
})

I am aware that this functionality was functional in the past. An illustrative example can be found at the following link: https://stackblitz.com/edit/github-ac11u5?file=app.vue.

@pi0 Could you help me solve the problem?

I have same problem, setting max age for ipx dont work with external domain. Only work with public folder path

Setting in nuxt config

image: {
    domains: ['api.kytosai.com'],
    provider: 'ipx',
    ipx: {
      maxAge: 60 * 60 * 24 * 7, // 7 days
    },
  },

External domain:

Public folder path

[aetievant]

I am currently facing a similar issue, but it seems to be limited to external domains.

Image from external domain

Hello,

I'm facing the exact same issue than @gnidustotalus and @kytosai here, not able to set Cache-Control header for external domains.

Is there any news on a fix or at least a workaround? It's quite annoying to not be able to proxy cache images generated by IPX...

Thanks!

[aetievant]

I actually found a workaround which consist to deal with nuxt.config.js configuration and nitro route rules:

export default defineNuxtConfig({
  // [...]
  nitro: {
    routeRules: {
      "/_ipx/**": { headers: { 'cache-control': `public,max-age=691200,s-maxage=691200` } },
    }
  },
  // [...]
})

Not optimal but currently I will live with this, until there is a real fix to solve that issue.

Hope it helps!