fix(ipx): pass maxAge to ipx options

[yjl9903]

fix #704

Pass ipx maxAge option from nuxt.config.ts.

// nuxt.config.ts

export default defineNuxtConfig({
  // ...
  image: {
    ipx: {
      maxAge: 2592000,
    },
  },
  // ...
})

[netlify]

👷 Deploy request for nuxt-image-v1 pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	2ed4def

[pi0]

Thanks!

[guillaumeprevost]

This doesn't seem to be working (I'm using v0.7.1 with Nuxt2), even after setting the following config,

  image: {
    ipx: {
      maxAge: 8380800, // 97d
    },
    ...
 }

The max-age of cache for all IPX images remained 300 seconds.

I found a workaround After looking into the code of IPX library : I configured its max-age header by setting the environment variable IPX_MAX_AGE so that the lib itself would read the env variable and set it

But that is only a workaround that bypasses entirely the configuration that should be achievable through nuxt-image.

[yjl9903]

This doesn't seem to be working (I'm using v0.7.1 with Nuxt2), even after setting the following config,

  image: {
    ipx: {
      maxAge: 8380800, // 97d
    },
    ...
 }

The max-age of cache for all IPX images remained 300 seconds.

I found a workaround After looking into the code of IPX library : I configured its max-age header by setting the environment variable IPX_MAX_AGE so that the lib itself would read the env variable and set it

But that is only a workaround that bypasses entirely the configuration that should be achievable through nuxt-image.

This PR fix this bug in the main branch for nuxt3, not for nuxt2.

Related code in v0 branch for nuxt2 still has this issue. Maybe you can open another PR to fix it for nuxt2.

image/src/ipx.ts

Lines 11 to 16 in 075d1c3

	const ipxOptions: ImageProviders['ipx'] = {
	dir: resolve(nuxt.options.rootDir, moduleOptions.dir),
	domains: moduleOptions.domains,
	sharp: moduleOptions.sharp,
	alias: moduleOptions.alias
	}

[SteveChurch]

This seems to work fine for me when running locally dev but when publishing to DigitalOcean in production it defaults to 300 for all ipx files.

Example:
https://dislist.gg/_ipx/f_webp/images/blog/single/dislist-blog-post1.png

 image: {
    ipx: {
      maxAge: 8380800,
    }
  },
  nitro: {
    publicAssets: [
        {
          baseUrl: "images",
          dir: "public/images",
          maxAge: 60 * 60 * 24 * 365,
        },
    ],
    routeRules: {
      "/img/**": { headers: { 'cache-control': `public,max-age=31536000,s-maxage=31536000` } },
      "/images/**": { headers: { 'cache-control': `public,max-age=31536000,s-maxage=31536000` } },
      "/_nuxt/**": { headers: { 'cache-control': `public,max-age=31536000,s-maxage=31536000` } },
      "/_ipx/**": { headers: { 'cache-control': `public,max-age=31536000,s-maxage=31536000` } },
    }

[yjl9903]

This seems to work fine for me when running locally dev but when publishing to DigitalOcean in production it defaults to 300 for all ipx files.

Example: https://dislist.gg/_ipx/f_webp/images/blog/single/dislist-blog-post1.png

 image: {
    ipx: {
      maxAge: 8380800,
    }
  },
  nitro: {
    publicAssets: [
        {
          baseUrl: "images",
          dir: "public/images",
          maxAge: 60 * 60 * 24 * 365,
        },
    ],
    routeRules: {
      "/img/**": { headers: { 'cache-control': `public,max-age=31536000,s-maxage=31536000` } },
      "/images/**": { headers: { 'cache-control': `public,max-age=31536000,s-maxage=31536000` } },
      "/_nuxt/**": { headers: { 'cache-control': `public,max-age=31536000,s-maxage=31536000` } },
      "/_ipx/**": { headers: { 'cache-control': `public,max-age=31536000,s-maxage=31536000` } },
    }

@SteveChurch Maybe you can open a new issue to track this bug and provide some reproduction. I think it works on my prod env.