nuxt / nuxt/image

AWS Amplify not generating image widths as expected

Open
#1,694 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.5k
Forks
331
Avg merge
19h 52m
Merged PRs (30d)
9

Description

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!

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the NuxtPicture example and its sizes and image.screens configuration, then reproduce which widths Amplify generates for the listed breakpoints. Trace the image-width selection behavior and compare it with the documented configuration; done means the expected behavior is clearly established and the implementation or documentation is corrected accordingly.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.