Served Images in AWS Amplify does NOT return the asset as webp/jpeg and always image/avif

[BeFit-PH]

Backend Dev doing frontend work!

I have done everything I could but couldn't make it work. I have assets in my public/images directory and am using it like this

      <NuxtImg
        alt="banner"
        class="image"
        loading="eager"
        width="1280"
        height="1000"
        format="webp"
        src="/images/coming-soon-min.webp"
        @load="bannerLoaded = true"
      />

However, it always return as image/avif when requested. The URL looks some thing like, https://{{domain}}/_amplify/image?url=%2Fimages%2Fcoming-soon-min.webp&w=1280&h=1000&q=100

In my nuxt.config.ts, I also have nitro preset.

  nitro: {
    preset: 'aws-amplify',
    awsAmplify: {
      imageOptimization: {
        path: '/_amplify/image',
        cacheControl: 'public, max-age=3600, immutable',
      },
      imageSettings: {
        formats: ['image/webp', 'image/jpeg'],
        sizes: [320, 640, 1280],
        domains: [],
        remotePatterns: [],
        minimumCacheTTL: 3600,
        dangerouslyAllowSVG: false,
      },
    },
  },

But still the same, it doesn't work!

I referred to this as well: https://docs.aws.amazon.com/amplify/latest/userguide/integrate-image-optimization-framework.html and seemed i was doing it right, but still no.

Please help!

[BeFit-PH]

I have also tried setting the provider itself but now getting errors that the image is not found.

If I access the images URL itself, it works:

However, in my actual website requesting this URL with /_ipx in it, it doesn't:

Here's my config taken from someone's reply #1006 (comment)

  image: {
    provider: 'ipx',
    ipx: {
      baseURL: '/_ipx',
      fs: { dir: 'public' },
    },
  },

[AronLEEdev]

same problem here. but i am a nuxt project deployed on amplify, so i did not change the provider to ipx. but still the format attribute seems to be not working when specified as png or webp, it always returns as avif and return slowly.

"@nuxt/image": "1.10.0"

u can see from the url that format is set to webp but it is still returning as avif in contenttype.

[migo-edamama-ph]

Any resolve here

[aaharu]

I read the document and found the following description.

https://docs.aws.amazon.com/amplify/latest/userguide/integrate-image-optimization-framework.html

HTTP headers
The Accept request HTTP header is used to specify the image formats, expressed as MIME types, allowed by the client (usually a web browser). The image optimization service will attempt to convert the image to the specified format. The value specified for this header will have a higher priority than the format query parameter. For example, a valid value for the Accept header is image/png, image/webp, / . The formats setting specified in the Amplify deployment manifest will restrict the formats to those in the list. Even if the Accept header asks for a specific format, it will be ignored if the format isn't in the allow list.

The value in the Accept header takes precedence over the query string, so as long as avif is in the allowlist, accessing it in browsers like Chrome should return avif.
When accessing from a browser, the Accept header is sent by default, so specifying it in the query string seems rather useless.

Since the allowlist cannot be set via moduleOptions, it seems avif will be set as configured in the current version.
https://github.com/nuxt/image/blob/v1.11.0/src/provider.ts#L87