[gatsby-image] Art direction in not working as expected.

[HenrikDK2]

Similar #17528

Images are not following the media queries rules when more than 2 images are present in the array.

const sources = [
    mobile.childImageSharp.fluid,
    {
      ...tablet.childImageSharp.fluid,
      media: `(min-width: 500px)`,
    },
    {
      ...desktopSmall.childImageSharp.fluid,
      media: `(min-width: 950px)`,
    },
    {
      ...desktop.childImageSharp.fluid,
      media: `(min-width: 1200px)`,
    },
  ];

The above renders the tablet image at 500px, and phone below. Completely ignoring the desktop images.

  const sources = [
    mobile.childImageSharp.fluid,

    {
      ...desktopSmall.childImageSharp.fluid,
      media: `(min-width: 950px)`,
    },
    {
      ...desktop.childImageSharp.fluid,
      media: `(min-width: 1200px)`,
    },
    {
      ...tablet.childImageSharp.fluid,
      media: `(min-width: 500px)`,
    },
  ];

When switching the order in the array, images renders as following:
Mobile > Tablet > desktopSmall

But now it doesn't render the desktop image.

I would expect it to render depending on the queries specified:
Mobile > Tablet > desktopSmall > desktop

Environment

"gatsby": "^2.30.3",
"gatsby-image": "^2.9.0"

Minimal Reproduction

[LekoArts]

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[HenrikDK2]

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

Here is a minimal reproduction: https://github.com/HenrikDK2/gatsby-image-art-direction-issue

[ascorbic]

Hi @HenrikDK2 ,
The browser evaluates the sources from top to bottom, and uses the first one where the media query matches, and then falls-back to the img tag if none matches. It sees the tablet source first, and the (min-width: 500px) query matches (because the window is more than 500px wide), it uses that one and doesn't check the rest. Changing the order to this solves it for me:

  const sources = [
    mobile.childImageSharp.fluid,
    {
      ...desktop.childImageSharp.fluid,
      media: `(min-width: 1600px)`,
    },
    {
      ...laptop.childImageSharp.fluid,
      media: `(min-width: 1200px)`,
    },
    {
      ...tablet.childImageSharp.fluid,
      media: `(min-width: 500px)`,
    },
  ]