Served Images in AWS Amplify does NOT return the asset as webp/jpeg and always image/avif #1886
Description
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!