[gatsby-image] Fixed image with media query are not resized

[squelix]

Description

I defined two fixed Image:

• for desktop with a media query
• for mobile without media query

When my screen resized it downloads the smallest image but it doesn't resize the gatsby-image-wrapper :/

Steps to reproduce

I define the Graphql queries like this:

export const query = graphql`
  query {
    imageDesktop: file(relativePath: { eq: "home/partners/image.png" }) {
      childImageSharp {
        fixed(width: 161) {
          ...GatsbyImageSharpFixed
        }
      }
    }
    imageMobile: file(relativePath: { eq: "home/partners/image.png" }) {
      childImageSharp {
        fixed(width: 111) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`;

Then I define the sources like this:

const sources = [
  data.imageMobile.childImageSharp.fixed,
  {
    ...data.imageDesktop.childImageSharp.fixed,
    media: `(min-width: 768px)`,
  },
]

And I use the sources:

<Img
  alt="Alt for image"
  fixed={sources}
></Img>

Expected result

What should happen?

Actual result

The size of the Image is 161px even after the breakpoint of 768px, but id downloads the 111px Image.

Environment

  System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.15.2 - /usr/local/opt/node@10/bin/node
    Yarn: 1.17.3 - /usr/local/Cellar/yvm/3.6.1/shim/yarn
    npm: 6.4.1 - /usr/local/opt/node@10/bin/npm
  Languages:
    Python: 2.7.15 - /usr/local/bin/python
  Browsers:
    Chrome: 76.0.3809.100
    Firefox: 67.0.4
    Safari: 12.1.2
  npmPackages:
    gatsby: ^2.5.5 => 2.13.59
    gatsby-image: ^2.1.0 => 2.2.8
    gatsby-plugin-env-variables: ^1.0.1 => 1.0.1
    gatsby-plugin-manifest: ^2.1.1 => 2.2.5
    gatsby-plugin-nprogress: ^2.0.10 => 2.1.2
    gatsby-plugin-offline: ^2.1.1 => 2.2.5
    gatsby-plugin-postcss: ^2.0.7 => 2.1.2
    gatsby-plugin-react-helmet: ^3.0.12 => 3.1.3
    gatsby-plugin-react-svg: ^2.1.1 => 2.1.2
    gatsby-plugin-robots-txt: ^1.4.0 => 1.5.0
    gatsby-plugin-sharp: ^2.1.3 => 2.2.11
    gatsby-plugin-sitemap: ^2.1.0 => 2.2.6
    gatsby-source-filesystem: ^2.0.36 => 2.1.9
    gatsby-transformer-sharp: ^2.1.21 => 2.2.6

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[kimbaudi]

@squelix - I think I'm also facing this same issue as well. I will try to create a minimal reproducible demo project, but at least wanted to comment that this issue shouldn't be stale.

BTW, I think you made a typo. In your graphql query, you name your files lovysDesktop and lovysMobile, but in your sources, you reference the files as data.imageDesktop and data.imageMobile.

[taj]

facing the same issue as well

[squelix]

@squelix - I think I'm also facing this same issue as well. I will try to create a minimal reproducible demo project, but at least wanted to comment that this issue shouldn't be stale.

BTW, I think you made a typo. In your graphql query, you name your files lovysDesktop and lovysMobile, but in your sources, you reference the files as data.imageDesktop and data.imageMobile.

I fixed my message, thanks :)

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[yertech]

Same issue for me with fixed Img. It always takes the first element in the array

[squelix]

yes :/

[zeeshanaligold]

@squelix did u get fixed?

[squelix]

No... I don't have time to do it by myself, sorry :(

[qramilq]

@squelix if I understood correctly, you can try to set media-query to mobile image too.
In your case yo can try to use (max-width: 767px)

const sources = [
  {
    ...data.imageMobile.childImageSharp.fixed,
   media: `(max-width: 767px)`
  },
  {
    ...data.imageDesktop.childImageSharp.fixed,
    media: `(min-width: 768px)`,
  },
]

Gatsby image use window.matchMedia to get current image. Maybe it helps

[LeeRob97]

@qramilq this worked for me!

[qramilq]

@LeeRob97 you are welcome)

[LeeRob97]

@qramilq I am running into a strange issue with the media queries, when I am in development mode things work fine, but as soon as I create my production build the first element in the array is always loaded in, regardless of the media query. I have to resize my window in order for things to start working correctly.

[qramilq]

@LeeRob97 did you tried to cleat .cache and public folders before run build? Cause I don't think, that production version makes so seriously changes instead of development version.
Also, you can look to the gatsby-image source code, especially, at this line https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/src/index.js#L87 to understand, how it works)

[meros]

I encountered this as well - the right image is loaded again when I resize the window over one of the media query boundaries... Development works fine, production suffers from the problem.

[meros]

Here is a repro:
https://github.com/meros/gatsby-bug-repro-image-media-queries
So it turns out that the I do get right image, but it's layouting is not right at first load.

To trigger the bug, do:
yarn && yarn build
npx serve public

open chrome http://localhost:5000 and resize the window. Try reloading - the image is size weirdly until you again resize window to a point where you hit one of the media query boundaries.

[LeeRob97]

@qramilq I switched my images from type fixed to fluid and that works.

[crperez5]

There's definitely a bug here.

Gatsby will pick a different image depending on the environment.

• If development, it will pick the correct image based on the media property.
• If production, it will pick the first image on the list.

Would be nice if someone could have a look at it.

Thanks.

[comoser]

@gatsbyjs/core how is this closed when people are still having this problem nowadays?
PS I'm having the exact same issues, so maybe we can reopen the ticket 👍

[KosGrillis]

I'm experiencing the same problem, are we able to reopen this one?

I query for my images as follows:

imgLg: img {
  fixed(width: 734) {
    src
    srcSet
    width
    height
  }
}
imgMd: img {
  fixed(width: 568) {
    src
    srcSet
    width
    height
  }
}
imgSm: img {
  fixed(width: 375) {
    src
    srcSet
    width
    height
  }
}

I set up my sources as follows:

const imgSources = [
    {
      ...imageContent.imgSm.fixed,
      media: theme.breakpoints.sm,
    },
    {
      ...imageContent.imgSm.fixed,
      media: theme.breakpoints.md,
    },
    {
      ...imageContent.imgSm.fixed,
      media: theme.breakpoints.lg,
    },
]

In development this works fine, but in production the first source in that array is matched, until the screen is resized. Is it something to do with SSR?

[siffogh]

Exactly the same issue, works on development but not in the production build.

[pvdz]

Anybody willing to put up a PR to fix whatever the bug is?

[siffogh]

I fixed it by using directly gatsby-plugin-sharp and not relying on gatsby-image:

export default function Home() {
  const { mobileImage, desktopImage } = getImageSources();

  return (
    <div>
         ...
        <picture>
          <source media="(min-width: 480px)" srcSet={desktopImage.srcSet} />
          <img
            src={mobileImage.src}
            srcSet={mobileImage.srcSet}
            alt="home"
            loading="lazy"
          />
        </picture>
      ....
    </div>
  );
}

// P.S. You can also just grab src and srcSet instead of using `GatsbyImageSharpFixed` fragment
function getImageSources() {
  const data = useStaticQuery(graphql`
    query {
      mobileImage: file(relativePath: { eq: "home.png" }) {
        childImageSharp {
          fixed(width: 500) {
            ...GatsbyImageSharpFixed
          }
        }
      }
      desktopImage: file(relativePath: { eq: "home.png" }) {
        childImageSharp {
          fixed(width: 900) {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  `);

  return {
    mobileImage: data.mobileImage.childImageSharp.fixed,
    desktopImage: data.desktopImage.childImageSharp.fixed
  };
}

[kaushalyap]

@KyleAMathews Please reopen this issue.

[polarathene]

This issue has been resolved with the following PR #24811

Please subscribe to that and await it being reviewed and merged.

[pvdz]

Reopening as there is a PR for it

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[polarathene]

Not stale, awaiting feedback on how to proceed from core team.

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[polarathene]

Not stale, awaiting feedback on how to proceed from core team.

[iheathers]

@squelix

const sources = [
{ ...data.imageMobile.childImageSharp.fixed,
media: (max-width: 768px),},

{
...data.imageDesktop.childImageSharp.fixed,
media: (max-width: 1920px),
},
]

I did something like this to get it to work. I would love a mobile-first approach but this was the only way I got it to work.