Gatsby-image breaks in production after reload #27732

AlanJereb · 2020-10-30T13:59:22Z

Description

Image component works correctly in development. In production, however, it works correctly if we visit the blog post through website navigation, but as soon as we reload or visit the link to the blog post directly, the image breaks.

Steps to reproduce

Visit: https://www.alanjereb.com/blog
Click on the blogpost: "Ending with a surprise"
See subheading: The Britten empire (loads as intended)
Reload the page or visit the blogpost link directly (first image breaks)

repo: https://github.com/AlanJereb/alanjereb.com_Gatsby
Image generation code:

<div className={blogStyles.imageContainer} key={index}>
                                <div>
                                    <div onClick={() => openLightbox(id)}>
                                        <Img fluid={localUrlEdge.node.localFile.childImageSharp.fluid} alt={alt} title={alt} imgStyle={{ objectFit: 'contain' }} style={{ maxHeight: "417px" }} />
                                    </div>
                                    <div className={blogStyles.lightbox} id={id} onClick={() => openLightbox(id)}>
                                        <Img fluid={localUrlEdge.node.localFile.childImageSharp.fluid} alt={alt} title={alt} imgStyle={{ objectFit: 'contain' }} style={{ maxWidth: "1140px" }} />
                                        <h4>{alt}</h4>
                                    </div>
                                </div>
                                <p>{alt}</p>
                            </div>

Expected result

It should work as it does in development.

Environment

System:
    OS: Windows 10 10.0.19041
    CPU: (16) x64 Intel(R) Core(TM) i7-10700K CPU @ 3.80GHz
  Binaries:
    Node: 12.18.4 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.423.0)
  npmPackages:
    gatsby: ^2.24.67 => 2.24.86
    gatsby-image: ^2.4.21 => 2.4.21
    gatsby-plugin-react-helmet: ^3.3.14 => 3.3.14
    gatsby-plugin-sass: ^2.3.16 => 2.3.21
    gatsby-plugin-sharp: ^2.6.42 => 2.6.43
    gatsby-remark-images: ^3.3.34 => 3.3.39
    gatsby-remark-images-contentful: ^2.3.19 => 2.3.19
    gatsby-remark-relative-images: ^2.0.2 => 2.0.2
    gatsby-source-contentful: ^2.3.55 => 2.3.56
    gatsby-source-filesystem: ^2.3.34 => 2.3.36
    gatsby-transformer-remark: ^2.8.38 => 2.8.46
    gatsby-transformer-sharp: ^2.5.18 => 2.5.20
  npmGlobalPackages:
    gatsby-cli: 2.12.106

The text was updated successfully, but these errors were encountered:

LekoArts · 2020-11-02T08:14:35Z

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. This way we don't need to access your Contentful space and in the process of making it you can see if you whole modifiedResponse logic is the culprit, e.g. wrong index. Because displaying images in a row works fine, it must be something specific to your code/project.

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! 💜

LekoArts · 2020-11-16T10:42:17Z

Hi!

Since we didn't receive an answer for 7 business days or more about the ask of a reproduction I'm going to close this now, as we can't do much to help without a reproduction. If you are able to create a minimal reproduction for this then please do answer here or reopen the issue. Thanks!

emilkarl · 2021-02-14T10:43:54Z

I have the same problem, did you find a solution to it @AlanJereb?

AlanJereb · 2021-02-14T10:46:12Z

I have the same problem, did you find a solution to it @AlanJereb?

Sadly no. If you find it, please ping me.

emilkarl · 2021-02-15T20:29:18Z

Tried rewriting how we did this but still the same problem. On page reload in production the Gastby image is closing its div without adding and padding or anything too it. We are using twin.macro if that could have any impact? 🤷‍♂️

Code after reload

<div class="wallet___StyledDiv-wbrzp-8 hMlsJK">
  <div></div>
  <img
    aria-hidden="true"
    src="data:image/png;base64,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"
    alt=""
    style="
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      opacity: 0;
      transition-delay: 500ms;
    "
  /><picture
    ><source
      srcset="
        /static/f2c408bf6eab9886c192a09009549b84/6d161/macos.png 150w,
        /static/f2c408bf6eab9886c192a09009549b84/630fb/macos.png 300w,
        /static/f2c408bf6eab9886c192a09009549b84/2a4de/macos.png 600w,
        /static/f2c408bf6eab9886c192a09009549b84/ead32/macos.png 876w
      "
      sizes="(max-width: 600px) 100vw, 600px" />
    <img
      sizes="(max-width: 600px) 100vw, 600px"
      srcset="
        /static/f2c408bf6eab9886c192a09009549b84/6d161/macos.png 150w,
        /static/f2c408bf6eab9886c192a09009549b84/630fb/macos.png 300w,
        /static/f2c408bf6eab9886c192a09009549b84/2a4de/macos.png 600w,
        /static/f2c408bf6eab9886c192a09009549b84/ead32/macos.png 876w
      "
      src="/static/f2c408bf6eab9886c192a09009549b84/2a4de/macos.png"
      alt=""
      loading="lazy"
      style="
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        opacity: 1;
        transition: opacity 500ms ease 0s;
      " /></picture

  ><noscript
    ><picture
      ><source
        srcset="
          /static/f2c408bf6eab9886c192a09009549b84/6d161/macos.png 150w,
          /static/f2c408bf6eab9886c192a09009549b84/630fb/macos.png 300w,
          /static/f2c408bf6eab9886c192a09009549b84/2a4de/macos.png 600w,
          /static/f2c408bf6eab9886c192a09009549b84/ead32/macos.png 876w
        "
        sizes="(max-width: 600px) 100vw, 600px" />
      <img
        loading="lazy"
        sizes="(max-width: 600px) 100vw, 600px"
        srcset="
          /static/f2c408bf6eab9886c192a09009549b84/6d161/macos.png 150w,
          /static/f2c408bf6eab9886c192a09009549b84/630fb/macos.png 300w,
          /static/f2c408bf6eab9886c192a09009549b84/2a4de/macos.png 600w,
          /static/f2c408bf6eab9886c192a09009549b84/ead32/macos.png 876w
        "
        src="/static/f2c408bf6eab9886c192a09009549b84/2a4de/macos.png"
        alt=""
        style="
          position: absolute;
          top: 0;
          left: 0;
          opacity: 1;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
        " /></picture
  ></noscript>
</div>

Code when entering by clicking a link

<div
  class="wallet___StyledImg-wbrzp-7 kQBYtB gatsby-image-wrapper"
  style="position: relative; overflow: hidden;"
>
  <div aria-hidden="true" style="width: 100%; padding-bottom: 157.333%;"></div>
  <img
    aria-hidden="true"
    src="data:image/png;base64,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"
    alt=""
    style="
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      opacity: 0;
    "
  /><picture
    ><source
      srcset="
        /static/f2c408bf6eab9886c192a09009549b84/6d161/macos.png 150w,
        /static/f2c408bf6eab9886c192a09009549b84/630fb/macos.png 300w,
        /static/f2c408bf6eab9886c192a09009549b84/2a4de/macos.png 600w,
        /static/f2c408bf6eab9886c192a09009549b84/ead32/macos.png 876w
      "
      sizes="(max-width: 600px) 100vw, 600px" />
    <img
      sizes="(max-width: 600px) 100vw, 600px"
      srcset="
        /static/f2c408bf6eab9886c192a09009549b84/6d161/macos.png 150w,
        /static/f2c408bf6eab9886c192a09009549b84/630fb/macos.png 300w,
        /static/f2c408bf6eab9886c192a09009549b84/2a4de/macos.png 600w,
        /static/f2c408bf6eab9886c192a09009549b84/ead32/macos.png 876w
      "
      src="/static/f2c408bf6eab9886c192a09009549b84/2a4de/macos.png"
      alt=""
      loading="lazy"
      style="
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        opacity: 1;
        transition: none 0s ease 0s;
      " /></picture

  ><noscript
    ><picture
      ><source
        srcset="
          /static/f2c408bf6eab9886c192a09009549b84/6d161/macos.png 150w,
          /static/f2c408bf6eab9886c192a09009549b84/630fb/macos.png 300w,
          /static/f2c408bf6eab9886c192a09009549b84/2a4de/macos.png 600w,
          /static/f2c408bf6eab9886c192a09009549b84/ead32/macos.png 876w
        "
        sizes="(max-width: 600px) 100vw, 600px" />
      <img
        loading="lazy"
        sizes="(max-width: 600px) 100vw, 600px"
        srcset="
          /static/f2c408bf6eab9886c192a09009549b84/6d161/macos.png 150w,
          /static/f2c408bf6eab9886c192a09009549b84/630fb/macos.png 300w,
          /static/f2c408bf6eab9886c192a09009549b84/2a4de/macos.png 600w,
          /static/f2c408bf6eab9886c192a09009549b84/ead32/macos.png 876w
        "
        src="/static/f2c408bf6eab9886c192a09009549b84/2a4de/macos.png"
        alt=""
        style="
          position: absolute;
          top: 0;
          left: 0;
          opacity: 1;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
        " /></picture
  ></noscript>
</div>

emilkarl · 2021-02-15T20:39:34Z

@AlanJereb solved it by removing my classes from the image and putting them on a wrapper div instead.

AlanJereb added the type: bug An issue or pull request relating to a bug in Gatsby label Oct 30, 2020

gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Oct 30, 2020

LekoArts added status: needs reproduction This issue needs a simplified reproduction of the bug for further troubleshooting. and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Nov 2, 2020

LekoArts closed this as completed Nov 2, 2020

LekoArts reopened this Nov 2, 2020

LekoArts closed this as completed Nov 16, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gatsby-image breaks in production after reload #27732

Gatsby-image breaks in production after reload #27732

AlanJereb commented Oct 30, 2020 •

edited

Loading

LekoArts commented Nov 2, 2020

LekoArts commented Nov 16, 2020

emilkarl commented Feb 14, 2021

AlanJereb commented Feb 14, 2021

emilkarl commented Feb 15, 2021

emilkarl commented Feb 15, 2021

Gatsby-image breaks in production after reload #27732

Gatsby-image breaks in production after reload #27732

Comments

AlanJereb commented Oct 30, 2020 • edited Loading

Description

Steps to reproduce

Expected result

Environment

LekoArts commented Nov 2, 2020

LekoArts commented Nov 16, 2020

emilkarl commented Feb 14, 2021

AlanJereb commented Feb 14, 2021

emilkarl commented Feb 15, 2021

Code after reload

Code when entering by clicking a link

emilkarl commented Feb 15, 2021

AlanJereb commented Oct 30, 2020 •

edited

Loading