rigid dirge
The <@&1055234544183287879>/image Picture component is somehow not working for me. Here is an example:
<Picture
src={import(`../images/projects/${project.data.thumbnail}.png`)}
alt={`Project-${project.slug}`}
widths={[200, 400, 800]}
sizes="(max-width: 600px) 200px, (max-width: 800px) 400px, 800px"
aspectRatio={3 / 2}
/>
Based on the widths property, this should create three versions of the image with a width of 200, 400 and 800 respectively. With the sizes property, I'm simply telling the library to display the smallest image when the screen is smaller than 600 and width and so on.
However, no matter the screen size, the library always chooses the largest of the three images (in this example 800px wide). Resizing (and reloading) the page in the browser doesn't change the image's intrinsic width (chrome inspector) to a smaller image.
Am I missing something here or is the library not working as expected?
Thank you for your help!
wooden basin