AWS Amplify not generating image widths as expected
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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