Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[gatsby-image] Difference in styles between develop and build packages versions

See original GitHub issue

Description

This problem occurred for me in gatsby-image versions: 2.2.42 and 2.3.1

I have this component

import * as classnames from 'classnames';
import { theme } from 'components/src/components/Layout/ThemeProvider/ThemeProvider';
import { graphql, useStaticQuery } from 'gatsby';
import Img from 'gatsby-image';
import * as React from 'react';

type Props = {
  className?: string;
};
type ImageSharpFixed = {
  aspectRatio: number;
  base64: string;
  height: number;
  originalName: string;
  src: string;
  srcSet: string;
  srcSetWebp: string;
  srcWebp: string;
  tracedSVG: string;
  width: number;
};

type DeviceType =
  | 'small'
  | 'mobile'
  | 'tablet'
  | 'laptop'
  | 'desktop';

type ImagesQueryResult = Record<DeviceType, { childImageSharp: { fixed: ImageSharpFixed } }>;

const Image: React.FC<Props> = ({ className }) => {
  const data = useStaticQuery<ImagesQueryResult>(graphql`
      query {
          small: file(relativePath: { eq: "isometric-2018x1408.png" }) {
              childImageSharp {
                  fixed(width: 460){
                      ...GatsbyImageSharpFixed
                  }
              }
          }
          mobile: file(relativePath: { eq: "isometric-2018x1408.png" }) {
              childImageSharp {
                  fixed(width: 576){
                      ...GatsbyImageSharpFixed
                  }
              }
          }
          tablet: file(relativePath: { eq: "isometric-2018x1408.png" }) {
              childImageSharp {
                  fixed(width: 768){
                      ...GatsbyImageSharpFixed
                  }
              }
          }
          laptop: file(relativePath: { eq: "isometric-2018x1408.png" }) {
              childImageSharp {
                  fixed(width: 992){
                      ...GatsbyImageSharpFixed
                  }
              }
          }
          desktop: file(relativePath: { eq: "isometric-2018x1408.png" }) {
              childImageSharp {
                  fixed(width: 1200){
                      ...GatsbyImageSharpFixed
                  }
              }
          }
      }
  `);

  const sources = [
    {
      ...data.desktop.childImageSharp.fixed,
      media: theme.deviceBreakpoints.desktop,
    },
    {
      ...data.laptop.childImageSharp.fixed,
      media: theme.deviceBreakpoints.laptop,
    },
    {
      ...data.tablet.childImageSharp.fixed,
      media: theme.deviceBreakpoints.tablet,
    },
    {
      ...data.mobile.childImageSharp.fixed,
      media: theme.deviceBreakpoints.mobile,
    },
    {
      ...data.small.childImageSharp.fixed,
      media: theme.deviceBreakpoints.small,
    },
  ];

  const tailwindClassNames = [
    'small:ml-8',
    'small:mt-16',
    'mobile:mt-20',
    'mobile:flex',
    'mobile:justify-center',
    'laptop:ml-24',
  ];

  return (
    <div className={classnames(tailwindClassNames)}>
      <Img
        fixed={sources}
        fadeIn={false}
        critical={true}
      />
    </div>
  );
};
export default Image;

The theme variable is:

const size = {
  small: '575px',
  mobile: '576px',
  tablet: '768px',
  laptop: '1366px',
  desktop: '1920px',
};

const deviceBreakpoints = {
  small: `(max-width: ${size.small})`,
  mobile: `(min-width: ${size.mobile})`,
  tablet: `(min-width: ${size.tablet})`,
  laptop: `(min-width: ${size.laptop})`,
  desktop: `(min-width: ${size.desktop})`,
};

const mixins = {
  unselectable: `
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;`,
};

export const theme = {
  size,
  deviceBreakpoints,
  mixins,
  space: [0, '1rem', '2rem', '3rem', '4rem'],
}

If I compile my project with gatsby develop command line, style on wrapping div (className=gatsby-image-wrapper) on the desktop screen is

position: relative;
overflow: hidden;
display: inline-block;
width: 992px;
height: 692px;

But when I run gatsby build I get

position: relative;
overflow: hidden;
display: inline-block;
width: 1200px;
height: 837px;

I don’t understand what is the source of the dimensions difference.

Environment

  System:
    OS: Linux 5.5 Ubuntu 18.04.4 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 10.16.2 - ~/.nvm/versions/node/v10.16.2/bin/node
    Yarn: 1.22.0 - /usr/bin/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v10.16.2/bin/npm
  Languages:
    Python: 2.7.17 - /usr/bin/python
  npmGlobalPackages:
    gatsby-cli: 2.11.3

Edit

I found another difference in the <noscript> tag content: Here is develop content:

<picture>
    <source media="(min-width: 1920px)" srcset="/static/2fc0d917edb04bbc25eaa5e8fdc12946/f3583/isometric-2018x1408.png 1x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/bbee5/isometric-2018x1408.png 1.5x"
    />
    <source media="(min-width: 1366px)" srcset="/static/2fc0d917edb04bbc25eaa5e8fdc12946/7d603/isometric-2018x1408.png 1x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/262df/isometric-2018x1408.png 1.5x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/428eb/isometric-2018x1408.png 2x"
    />
    <source media="(min-width: 768px)" srcset="/static/2fc0d917edb04bbc25eaa5e8fdc12946/0756a/isometric-2018x1408.png 1x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/3aed7/isometric-2018x1408.png 1.5x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/1dcea/isometric-2018x1408.png 2x"
    />
    <source media="(min-width: 576px)" srcset="/static/2fc0d917edb04bbc25eaa5e8fdc12946/bb8b5/isometric-2018x1408.png 1x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/25590/isometric-2018x1408.png 1.5x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/3aed7/isometric-2018x1408.png 2x"
    />
    <source media="(max-width: 575px)" srcset="/static/2fc0d917edb04bbc25eaa5e8fdc12946/88670/isometric-2018x1408.png 1x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/3c741/isometric-2018x1408.png 1.5x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/3225f/isometric-2018x1408.png 2x"
    />
    <img loading="lazy" width="768" height="536" srcset="/static/2fc0d917edb04bbc25eaa5e8fdc12946/0756a/isometric-2018x1408.png 1x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/3aed7/isometric-2018x1408.png 1.5x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/1dcea/isometric-2018x1408.png 2x"
         src="/static/2fc0d917edb04bbc25eaa5e8fdc12946/0756a/isometric-2018x1408.png" alt=""
         style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"
    /></picture>

And here is build content:

<picture>
    <source media="(min-width: 1920px)" srcset="/static/2fc0d917edb04bbc25eaa5e8fdc12946/f3583/isometric-2018x1408.png 1x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/bbee5/isometric-2018x1408.png 1.5x"
    />
    <source media="(min-width: 1366px)" srcset="/static/2fc0d917edb04bbc25eaa5e8fdc12946/7d603/isometric-2018x1408.png 1x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/262df/isometric-2018x1408.png 1.5x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/428eb/isometric-2018x1408.png 2x"
    />
    <source media="(min-width: 768px)" srcset="/static/2fc0d917edb04bbc25eaa5e8fdc12946/0756a/isometric-2018x1408.png 1x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/3aed7/isometric-2018x1408.png 1.5x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/1dcea/isometric-2018x1408.png 2x"
    />
    <source media="(min-width: 576px)" srcset="/static/2fc0d917edb04bbc25eaa5e8fdc12946/bb8b5/isometric-2018x1408.png 1x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/25590/isometric-2018x1408.png 1.5x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/3aed7/isometric-2018x1408.png 2x"
    />
    <source media="(max-width: 575px)" srcset="/static/2fc0d917edb04bbc25eaa5e8fdc12946/88670/isometric-2018x1408.png 1x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/3c741/isometric-2018x1408.png 1.5x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/3225f/isometric-2018x1408.png 2x"
    />
    <img loading="lazy" width="1200" height="837" srcset="/static/2fc0d917edb04bbc25eaa5e8fdc12946/f3583/isometric-2018x1408.png 1x,
/static/2fc0d917edb04bbc25eaa5e8fdc12946/bbee5/isometric-2018x1408.png 1.5x"
         src="/static/2fc0d917edb04bbc25eaa5e8fdc12946/f3583/isometric-2018x1408.png" alt=""
         style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"
    /></picture>

The <img> element has different value of srcset attribute.

Edit 2

If I view source of the build package in browser I can see that wrong dimensions are server side rendered.

Issue Analytics

State:
Created 3 years ago
Comments:10 (6 by maintainers)

Top GitHub Comments

1reaction

daigokcommented, May 3, 2020

@Js-Brecht

@daigok Is the image height dependent on the size of the screen?

Yes.

Probably the best way with either method to have a container that will be sized correctly, and in a method compatible with SSR, is to use CSS. You can add CSS classes to the container by using the className prop. That way you can use media queries.

Now I’ve switched to use fluid with className, then it worked! I thought if I have different size of images(art direction), then I need to use fixed image.

Thank you for your support.

0reactions

danabritcommented, May 29, 2020

Closing this issue due to inactivity (no repro) from the original poster, which I assume to mean it is resolved.

Also, much appreciation to @Js-Brecht for offering so much help on this thread! 💜

Top Results From Across the Web

Gatsby Image plugin

This guide will show you how to configure your images, including choosing layouts, placeholders and image processing options. While most of these options ......

Different styles in same component, only in gatsby build version

I forget to install styled-components plugin for gatsby. On develop everything working correctly, but on build version issues starts off.

Build your own Gatsby Source Plugin and Publish it to NPM ...

In this video tutorial we will create a Gatsby source plugin, and publish it to NPM!

gatsby-background-image - npm package - Snyk

As gatsby-image is designed to work seamlessly with Gatsby's native image processing capabilities powered by GraphQL and Sharp, so is gatsby-background-image .

Gatsby: The ultimate guide with examples - LogRocket Blog

This tutorial covers everything you'll ever need to know about Gatsby, including code demos and comparisons to React and Next.js.