Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AWS Amplify not generating image widths as expected #1694

Open
stuible opened this issue Feb 6, 2025 · 0 comments
Open

AWS Amplify not generating image widths as expected #1694

stuible opened this issue Feb 6, 2025 · 0 comments

Comments

@stuible
Copy link

stuible commented Feb 6, 2025

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant