(MESSAGE 1 / 2)
WHAT IS MY PROBLEM?
Responsive images throw runtime error using Next/Image.

WHAT AM I TRYING TO ACCOMPLISH?
If I think about use cases for images on the web I really only encounter 2 core scenarios.

1. Covering an Aspect Ratio
- Image should fill the width and height of a parent which defines the aspect ratio of the image.

=> This works totally fine using the fill prop ✅

<div className="relative aspect-[3/2] overflow-hidden"> <Image fill src={url} /> </div>

2. Fill width of parent and auto height
- The parent defines the width but doesn't know about height of image. Hence image height shall be auto and width shall be 100%. (Typical use case: Multiple images with different ratios below each other or in (masonry) grid.)
- This is commonly referred to as "Responsive Images". Interestingly Leerob's video about Next/Image (https://youtu.be/IU_qq_c_lKA?t=483) uses the exact implementation I had, but I (as seen below) I run into runtime errors)

=> Using Next/Image I can't get a width-100% and height-auto scenario working. ❗ ❌

WHAT HAVE I TRIED?

1. Use width 100% and height auto within style prop (Implementation from Lee's video: https://youtu.be/IU_qq_c_lKA?t=483)

<Image style={{ width: '100%', height: 'auto' }} src={src} />

Outcome: "Error: Image with src "https://..." is missing required "width" property."

2. Use width prop

<Image width="100%" src={url} />

Outcome: "Error: Image with src "https://..." has invalid "width" property. Expected a numeric value in pixels but received "100%"."

(Surely I can't use an absolute value here, since that would not be responsive anymore.)

3. Read documentation (https://nextjs.org/docs/pages/api-reference/components/image#responsive-images)
I am missing a part about not knowing the aspect ratio of the image and thereby not being able to set it on the parent. The documentation doesn't seem to cover this scenario.