Open
Description
On render it checks the breakpoint, but on window resize it doesn't switch out the image to the specified media query.
So in this example if the screen size is below 960px it will render a different image, but if i resize the window above 960px it doesn't switch out the image like it does in gatsby-image.
TLDR: Doesn't switch images on window resize.
...
const query = graphql`
query {
desktop: file(name: { eq: "bg" }, relativeDirectory: { eq: "movie" }) {
childImageSharp {
fluid(quality: 100, maxWidth: 3000) {
...GatsbyImageSharpFluid
}
}
}
mobile: file(name: { eq: "bgMobile" }, relativeDirectory: { eq: "movie" }) {
childImageSharp {
fluid(quality: 100, maxWidth: 3000) {
...GatsbyImageSharpFluid
}
}
}
}
`;
const Movie = () => {
const { mobile, desktop } = useStaticQuery(query);
const sources = [
mobile.childImageSharp.fluid,
{
...desktop.childImageSharp.fluid,
media: `(min-width: 960px)`,
},
];
return (
<Section critical Tag="section" fluid={sources}>
...
</Section>
);
};