AWS Amplify not generating image widths as expected

[stuible]

It appears as though you must know and include every single width that an image could possible be in your image.screens object or they will not be generated by Amplify. The documentation is very vague on this and I am still unsure of the exact behavior.

For example, I have this one NuxtPicture component:

<NuxtPicture
          format="avif,webp"
          :src="image.src"
          :sizes="80vw xs:90vw sm:50vw md:50vw lg:33vw xxl:25vw"
          fit="cover"
          :width="400"
          :height="250"
          :alt="image.alt"
        />

Here is my image config:

image: {
    screens: {
      'xs': 390,
      'sm': 640,
      'md': 868,
      'lg': 1124,
      'xl': 1280,
      'xxl': 1536,
      '2xl': 1536,
}

It looks to me that because 25% of my xxl view width is an arbitrary number, and not listed in my screens object, that it is straight up ignored and although the correct height is used, it falls back to one of the whitelisted widths. Is this true? If I include all these arbitrary widths as screens then I think it works, but this seems untenable and an abuse of the config:

screens: {
      'xs': 390,
      'sm': 640,
      'md': 868,
      'lg': 1124,
      'xl': 1280,
      'xxl': 1536,
      '2xl': 1536,

      // Custom, whitelist of pre-defined image widths
      100: 100,
      125: 125,
      134: 134,
      165: 165,
      175: 175,
      225: 225,
      250: 250,
      400: 400,
    },

Is this really what we are expected to do? Any light you're able to shed on this is very much appreciated!

[BjornTheProgrammer]

I ran into this issue as well. As the last person to work on the AWS Amplify provider I looked into it, and it seems that Amplify's image provider will only serve a set of different sizes that were previously supplied. This can be seen here in the docs.

With the current code, if the image size you provide is 400px, and the next largest size is 640px, the image returned will be 640px. A warning should be logged notifying you of this issue as well for any such image.

Additionally height and width only support numbers as seen here.

Ultimately this is a limitation with AWS Amplify, and I don't know if much can be done to mitigate this.

For reference, this is what my production nuxt.config.ts looks like

export default defineNuxtConfig({
	// ...
	nitro: {
		// ...
		awsAmplify: {
			imageSettings: {
				dangerouslyAllowSVG: true,
			},
		},
	},
	image: {
		// These must be provided to work properly with aws amplify. Really annoying
		screens: {
			gallery: 420,
			galleryPreview: 63,
			galleryImageSelection: 40,
			headerLogo: 82,
			loginLogo: 400,
		},
	},
});

[stuible]

@BjornTheProgrammer: Thanks so much for confirming my suspicions and providing that extra info. I agree that it would be great if the plugin could at least warn users when an image size not included in the image.screens object is used.

[BjornTheProgrammer]

@stuible No problem, glad I could help! One point of clarification, as my wording wasn’t the best. I ment that the console currently logs if a width doesn’t have a perfect width. If you go into your cloud formation logs you should be able to see the warnings.