[gatsby-plugin-image] mobile vs. desktop logo conflicting with gatsby-image-wrapper

[Isaac-Tait]

My site's desktop logo/mobile logo differing sizes are stepping on each other. At first I thought this was an issue with my code so I opened a discussion question for help but after further research I believe it is a bug.

Description

I found two similar issues #30096 and #30841 and a patch was pushed in version 1.4 to address. However, I am running v1.6.0 and I am still having a similar issue.

Here is my code:

import React from "react"
import { Link, useStaticQuery, graphql } from "gatsby"

import Navigation from "../components/navigation"
import Slider from "../components/slider"
import { GatsbyImage, getImage, withArtDirection } from "gatsby-plugin-image";
import Footer from "../components/footer"
import Pagination from "../templates/blog-pagination"

const Layout = ({ location, children }) => {
  const rootPath = `${__PATH_PREFIX__}/`
  let header

  const data = useStaticQuery(graphql`{
  desktopLogo: file(absolutePath: {regex: "/FfT_Logo_Desktop.png/"}) {
    childImageSharp {
      gatsbyImageData(
        width: 500
        quality: 100
        placeholder: TRACED_SVG
        formats: [AUTO, WEBP, AVIF]
        layout: FULL_WIDTH
      )
    }
  }
  mobileLogo: file(absolutePath: {regex: "/FfT_Logo_Mobile.png/"}) {
    childImageSharp {
      gatsbyImageData(
        quality: 100
        placeholder: BLURRED
        formats: [AUTO, WEBP, AVIF]
        layout: CONSTRAINED
      )
    }
  }
}
`)

const logos = withArtDirection(getImage(data.mobileLogo), [
  {
    media: "(min-width: 768px)",
    image: getImage(data.desktopLogo),
  },
])

  if (location.pathname === rootPath) {
    header = (
      <div class="px-4 mb-6 md:ml-20">
        <GatsbyImage image={logos} alt="Fallfish Tenkara" />
      </div>
    )
  } else {
    header = (
      <div class="px-4 mb-6 md:ml-20">
        <Link to={`/`}>
          <GatsbyImage image={logos} alt="Fallfish Tenkara" />
        </Link>
      </div>
        
    )
  }
  return (
    <div class="flex flex-col">
      <Navigation />
      <header class="pr-2">{header}</header>  
        <div class="hidden md:block w-2/3 mx-auto">
          <Slider />
        </div>
      <div class="bg-gray-200 mb-4 w-full lg:w-2/3 mx-auto overflow-hidden rounded-lg shadow-xl">
        <main>{children}</main>
        <Pagination />
      </div>
        <Footer />
    </div>
  )
}

export default Layout

If I open dev tools within localhost and edit the gatsby-image-wrapper from constrained to full_width then the logo is rendered "correctly". However, if I update within my code constrained to full_width then I get a slew of error messages in the console and local host (see screenshot below).

Also, I get Uncaught (in promise) ChunkLoadError: Loading hot update chunk node_modules_gatsby-plugin-image_dist_lazy-hydrate-4711f4b0_js failed. (missing: http://localhost:8000/node_modules_gatsby-plugin-image_dist_lazy-hydrate-4711f4b0_js.e64bd67ae4a8e3135120.hot-update.js) in the console which may be related to #18866 (???) After clearing the error messages the logo is still rendering incorrectly (both the live site and localhost currently have this issue)...

Here are two screen shots of the before and after edits of gatsby-image-wrapper from the dev tools.

So, it would seem that the edits I am making in the query with useStaticQuery are not being pushed to gatsby-image-wrapper for some reason...

Steps to reproduce

You should see the issue on the home page of my minimum repo here make sure to switch from mobile to desktop view in dev tools to see the logo switch...

Expected result

I should be able to seamlessly switch from my desktop logo and mobile logo and have the appropriate sizes of the png files rendered on the screen.

Actual result

The logo is only partially showing, or zoomed all the way in and when I attempt to edit the code in layout.js I get multiple runtime errors (that are often cleared by refreshing the browser but sometimes have to be cleared with gatsby clean and restart of localhost) and ChunkLoadErrors (as mentioned above in Description

Environment

System:
OS: macOS 11.4
CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.2.0 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 7.15.1 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Firefox: 88.0.1
Safari: 14.1.1
npmPackages:
gatsby: ^3.6.1 => 3.6.1
gatsby-awesome-pagination: ^0.3.8 => 0.3.8
gatsby-plugin-disqus: ^1.2.2 => 1.2.2
gatsby-plugin-feed: ^3.5.0 => 3.5.0
gatsby-plugin-gatsby-cloud: ^2.5.0 => 2.5.0
gatsby-plugin-google-analytics: ^3.5.0 => 3.5.0
gatsby-plugin-image: ^1.6.0 => 1.6.0
gatsby-plugin-manifest: ^3.5.0 => 3.5.0
gatsby-plugin-offline: ^4.5.1 => 4.5.1
gatsby-plugin-postcss: ^4.5.0 => 4.5.0
gatsby-plugin-react-helmet: ^4.5.0 => 4.5.0
gatsby-plugin-sharp: ^3.6.0 => 3.6.0
gatsby-remark-copy-linked-files: ^4.2.1 => 4.2.1
gatsby-remark-images: ^5.2.1 => 5.2.1
gatsby-remark-prismjs: ^5.2.1 => 5.2.1
gatsby-remark-responsive-iframe: ^4.2.1 => 4.2.1
gatsby-remark-smartypants: ^4.2.0 => 4.2.0
gatsby-source-filesystem: ^3.6.0 => 3.6.0
gatsby-transformer-remark: ^4.2.0 => 4.2.0
gatsby-transformer-sharp: ^3.6.0 => 3.6.0
npmGlobalPackages:
gatsby-cli: 2.12.111

[Isaac-Tait]

I can confirm the bug is still present with the latest gatsby and gatsby-plugin-image. Here is my most recent clipboard results:

  System:
    OS: macOS 11.4
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.2.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.15.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Firefox: 89.0
    Safari: 14.1.1
  npmPackages:
    gatsby: ^3.7.2 => 3.7.2
    gatsby-awesome-pagination: ^0.3.8 => 0.3.8
    gatsby-plugin-disqus: ^1.2.2 => 1.2.2
    gatsby-plugin-feed: ^3.7.1 => 3.7.1
    gatsby-plugin-gatsby-cloud: ^2.7.1 => 2.7.1
    gatsby-plugin-google-analytics: ^3.7.1 => 3.7.1
    gatsby-plugin-image: ^1.7.1 => 1.7.1
    gatsby-plugin-manifest: ^3.5.0 => 3.5.0
    gatsby-plugin-offline: ^4.7.1 => 4.7.1
    gatsby-plugin-postcss: ^4.7.1 => 4.7.1
    gatsby-plugin-react-helmet: ^4.7.1 => 4.7.1
    gatsby-plugin-sharp: ^3.7.1 => 3.7.1
    gatsby-remark-copy-linked-files: ^4.4.1 => 4.4.1
    gatsby-remark-images: ^5.4.1 => 5.4.1
    gatsby-remark-prismjs: ^5.4.1 => 5.4.1
    gatsby-remark-responsive-iframe: ^4.4.1 => 4.4.1
    gatsby-remark-smartypants: ^4.4.1 => 4.4.1
    gatsby-source-filesystem: ^3.7.1 => 3.7.1
    gatsby-transformer-remark: ^4.4.1 => 4.4.1
    gatsby-transformer-sharp: ^3.7.1 => 3.7.1
  npmGlobalPackages:
    gatsby-cli: 2.12.111

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

[Isaac-Tait]

This issue is not stale, I am still experiencing the issue with the logo...

[aaronaustin]

I'm experiencing this error as well.

[Isaac-Tait]

@aaronaustin Would you mind running gatsby info --clipboard and posting the results here? I am curious if this could be a plugin conflict issue...

[Isaac-Tait]

My app is fully updated and the issue is still present:

  System:
    OS: macOS 11.4
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.4.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.18.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Firefox: 89.0.2
    Safari: 14.1.1
  npmPackages:
    gatsby: ^3.9.1 => 3.9.1
    gatsby-awesome-pagination: ^0.3.8 => 0.3.8
    gatsby-plugin-disqus: ^1.2.2 => 1.2.2
    gatsby-plugin-feed: ^3.9.0 => 3.9.0
    gatsby-plugin-gatsby-cloud: ^2.9.1 => 2.9.1
    gatsby-plugin-google-analytics: ^3.9.0 => 3.9.0
    gatsby-plugin-image: ^1.9.0 => 1.9.0
    gatsby-plugin-manifest: ^3.9.0 => 3.9.0
    gatsby-plugin-offline: ^4.9.0 => 4.9.0
    gatsby-plugin-postcss: ^4.9.0 => 4.9.0
    gatsby-plugin-react-helmet: ^4.9.0 => 4.9.0
    gatsby-plugin-sharp: ^3.9.0 => 3.9.0
    gatsby-remark-copy-linked-files: ^4.6.0 => 4.6.0
    gatsby-remark-images: ^5.6.0 => 5.6.0
    gatsby-remark-prismjs: ^5.6.0 => 5.6.0
    gatsby-remark-responsive-iframe: ^4.6.0 => 4.6.0
    gatsby-remark-smartypants: ^4.6.0 => 4.6.0
    gatsby-source-filesystem: ^3.9.0 => 3.9.0
    gatsby-transformer-remark: ^4.6.0 => 4.6.0
    gatsby-transformer-sharp: ^3.9.0 => 3.9.0
  npmGlobalPackages:
    gatsby-cli: 2.12.111

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

[Isaac-Tait]

Not stale, still an issue

[totti-rdz]

Hi everyone!

I think I have exacty the same issue with withArtDirection() and responsive design.

It seems to me that the gatsby image wrapper container retains the aspect ratio of only one image (default image) and the other image (desktop image) is put inside this container with object-fit: cover but without changing the aspect ratio of the gatsby image wrapper container, thus the desktop image gets cropped.

Cropping can be prevented by adding a fixed height when the desktop image is shown, but then the desktop image does not scale with screen size...

Here is my gatsby info --clipboard output

System:
OS: macOS 11.5.1
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.17.4 - /usr/local/bin/node
npm: 7.20.5 - ~/pbaa/pbaa-jammerfasten-pages-app/node_modules/.bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 92.0.4515.131
Firefox: 90.0.2
Safari: 14.1.2
npmPackages:
gatsby: ^3.11.0 => 3.11.0
gatsby-background-image: ^1.5.3 => 1.5.3
gatsby-cli: ^3.11.0 => 3.11.0
gatsby-plugin-google-tagmanager: ^3.11.0 => 3.11.0
gatsby-plugin-image: ^1.11.0 => 1.11.0
gatsby-plugin-manifest: ^3.11.0 => 3.11.0
gatsby-plugin-minify-html: ^1.0.4 => 1.0.4
gatsby-plugin-netlify: ^3.11.0 => 3.11.0
gatsby-plugin-netlify-cms: ^5.11.0 => 5.11.0
gatsby-plugin-offline: ^4.11.0 => 4.11.0
gatsby-plugin-postcss: ^4.11.0 => 4.11.0
gatsby-plugin-preact: ^5.11.0 => 5.11.0
gatsby-plugin-preload-fonts: ^2.11.0 => 2.11.0
gatsby-plugin-react-helmet: ^4.11.0 => 4.11.0
gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0
gatsby-plugin-robots-txt: ^1.6.8 => 1.6.8
gatsby-plugin-scroll-reveal: 0.0.7 => 0.0.7
gatsby-plugin-sharp: ^3.11.0 => 3.11.0
gatsby-plugin-sitemap: ^4.7.0 => 4.7.0
gatsby-plugin-svgr: ^3.0.0-beta.0 => 3.0.0-beta.0
gatsby-remark-images: ^5.8.0 => 5.8.0
gatsby-remark-relative-images-v2: ^0.1.5 => 0.1.5
gatsby-source-filesystem: ^3.11.0 => 3.11.0
gatsby-transformer-remark: ^4.8.0 => 4.8.0
gatsby-transformer-sharp: ^3.11.0 => 3.11.0

[Isaac-Tait]

Just checking in, still having this issue... All my packages are up to date but the issue still persists.

  System:
    OS: macOS 11.5.2
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.6.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.20.3 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Firefox: 91.0.1
    Safari: 14.1.2
  npmPackages:
    gatsby: ^3.12.0 => 3.12.0
    gatsby-awesome-pagination: ^0.3.8 => 0.3.8
    gatsby-plugin-disqus: ^1.2.2 => 1.2.2
    gatsby-plugin-feed: ^3.12.0 => 3.12.0
    gatsby-plugin-gatsby-cloud: ^3.0.0 => 3.0.0
    gatsby-plugin-google-analytics: ^3.12.0 => 3.12.0
    gatsby-plugin-image: ^1.12.0 => 1.12.0
    gatsby-plugin-manifest: ^3.12.0 => 3.12.0
    gatsby-plugin-offline: ^4.12.0 => 4.12.0
    gatsby-plugin-postcss: ^4.12.0 => 4.12.0
    gatsby-plugin-react-helmet: ^4.12.0 => 4.12.0
    gatsby-plugin-sharp: ^3.12.0 => 3.12.0
    gatsby-remark-copy-linked-files: ^4.9.0 => 4.9.0
    gatsby-remark-images: ^5.9.0 => 5.9.0
    gatsby-remark-prismjs: ^5.9.0 => 5.9.0
    gatsby-remark-responsive-iframe: ^4.9.0 => 4.9.0
    gatsby-remark-smartypants: ^4.9.0 => 4.9.0
    gatsby-source-filesystem: ^3.12.0 => 3.12.0
    gatsby-transformer-remark: ^4.9.0 => 4.9.0
    gatsby-transformer-sharp: ^3.12.0 => 3.12.0
  npmGlobalPackages:
    gatsby-cli: 2.12.111

@vladar if there is anything I can do to help move this along please let me know. I have a minimum reproduction running and fully up to date here if you want to check it out. Cheers.

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

[Isaac-Tait]

Not stale - the issues is still persisting

[Graffiss]

Same here, it's ridiculous that the new gatsby-plugin-image keeps the aspect ratio of the original image.
I can't set it to fixed height with media queries as I don't know what image will be provided from CMS by a marketing team.

[wardpeet]

Is it possible to get a minimal reproduction?

[Isaac-Tait]

@wardpeet Here you go https://github.com/Isaac-Tait/gatsby-image_mimimum_repro

[adam993]

Still having this issue, on Gatsby ^4.0.0

[Isaac-Tait]

Hopefully the Gatsby crew will get this sorted out in 2022. I updated the repo to Gatsby 4.4 and confirmed that the issue is still present

https://github.com/Isaac-Tait/gatsby-image_mimimum_repro

[justinechang39]

Hi, I'm having this issue as well. Will show up every time I edit something during development, and will disappear when I refresh the page. Very annoying.

[HuyAms]

Hi, I got the same error. Do you have any suggestion on fixing this?

Loading hot update chunk node_modules_gatsby-plugin-image_dist_lazy-hydrate-20d22952_js failed. (error: http://localhost:8000/node_modules_gatsby-plugin-image_dist_lazy-hydrate-20d22952_js.3c5a60b46839cfb25e33.hot-update.js)

Loading hot update chunk node_modules_gatsby-plugin-image_dist_intersection-observer-6b794dd8_js failed. (error: http://localhost:8000/node_modules_gatsby-plugin-image_dist_intersection-observer-6b794dd8_js.3c5a60b46839cfb25e33.hot-update.js)

[Isaac-Tait]

@HuyAms Sorry but I personally do not have any fixes. This issue has been open for quite some time but it looks like the folks at Gatsby are cranking through closing issues right now. So, I am optimistic it will be sorted out soon. My site has been "broken" since June of last year when gatsby-plugin-image was deprecated...

[Isaac-Tait]

I was able to fix the broken logo by adding objectFit='scale-down' (docs) to the <GatsbyImage> component. Here is my full code for the homePage:

import React from "react"
import { Link, useStaticQuery, graphql } from "gatsby"

import Navigation from "../components/navigation"
import Slider from "../components/slider"
import { GatsbyImage, getImage, withArtDirection } from "gatsby-plugin-image";
import Footer from "../components/footer"
import Pagination from "../templates/blog-list-grouping"

const Layout = ({ location, children }) => {
  const rootPath = `${__PATH_PREFIX__}/`
  let header

  const data = useStaticQuery(graphql`{
  desktopLogo: file(absolutePath: {regex: "/FfT_Logo_Desktop.png/"}) {
    childImageSharp {
      gatsbyImageData(
        width: 500
        quality: 100
        placeholder: TRACED_SVG
        formats: [AUTO, WEBP, AVIF]
        layout: CONSTRAINED
      )
    }
  }
  mobileLogo: file(absolutePath: {regex: "/FfT_Logo_Mobile.png/"}) {
    childImageSharp {
      gatsbyImageData(
        width: 300
        quality: 100
        placeholder: BLURRED
        formats: [AUTO, WEBP, AVIF]
        layout: CONSTRAINED
      )
    }
  }
}
`)

const logos = withArtDirection(getImage(data.desktopLogo), [
  {
    media: "(max-width: 750px)",
    image: getImage(data.mobileLogo),
  },
])

  if (location.pathname === rootPath) {
    header = (
      <div class="px-4 mb-6 md:ml-20">
        <GatsbyImage 
          image={logos} 
          alt="Site_Logo"
          objectFit="scale-down" 
        />
      </div>
    )
  } else {
    header = (
      <div class="px-4 mb-6 md:ml-20">
        <Link to={`/`}>
          <GatsbyImage 
            image={logos} 
            alt="Site_Logo"
            objectFit="scale-down" 
          />
        </Link>
      </div>
        
    )
  }
  return (
    <div class="flex flex-col heropattern-topography-gray-400">
      <Navigation />
      <header class="pr-2">{header}</header>  
        <div class="hidden md:block w-2/3 mx-auto">
          <Slider />
        </div>
      <div class="bg-neutral-100 mb-4 w-full lg:w-2/3 mx-auto overflow-hidden rounded-lg shadow-xl">
        <main>{children}</main>
        <Pagination />
      </div>
        <Footer />
    </div>
  )
}

export default Layout

I hesitate to close the issue since so many devs were having similar issues... My solution may not work for all those who have chimed in on this issue over the past nine months or so.

[JenniferFalkenstein]

We also have this bug. In our case it helped to style the GatsbyImage element like that:
<GatsbyImage style={{position: 'unset'}} />

We also noticed that, depending on how we write our media query, the result is fixed for either dektop or mobile, but never both. Maybe this helps the devs/@wardpeet to debug the problem?
This version works fine for desktop screens but not for tablet/mobile screens

const artDirectedImages = withArtDirection(getImage(imageDesktop.childImageSharp.gatsbyImageData), [
    {
      media: `(max-width: 992px)`,
      image: getImage(imageMobile.childImageSharp.gatsbyImageData),
    },
  ]);

<GatsbyImage image={artDirectedImages} />

and this version works fine for tablet/mobile screens but not for desktop screens:

const artDirectedImages = withArtDirection(getImage(imageMobile.childImageSharp.gatsbyImageData), [
    {
      media: `(min-width: 992px)`,        // <-- also notice this change here
      image: getImage(imageDesktop.childImageSharp.gatsbyImageData),
    },
  ]);

<GatsbyImage image={artDirectedImages} />

We also tried merging both queries into one, but it makes no change 😞

[DevMostafaNassar]

@JenniferFalkenstein I think I found a workaround for you

const artDirectedImages = {
    gatsbyImageData: withArtDirection(
      getImage(imageMobile.childImageSharp.gatsbyImageData),
      [
        {
          media: `(min-width: 992px)`, // <-- also notice this change here
          image: getImage(imageDesktop.childImageSharp.gatsbyImageData),
        },
      ]
    ),
  };

<GatsbyImage image={getImage(artDirectedImages)} />

Or

const artDirectedImages = getImage({
    gatsbyImageData: withArtDirection(
      getImage(imageMobile.childImageSharp.gatsbyImageData),
      [
        {
          media: `(min-width: 992px)`, // <-- also notice this change here
          image: getImage(imageDesktop.childImageSharp.gatsbyImageData),
        },
      ]
    ),
  });

<GatsbyImage image={artDirectedImages} />

[JenniferFalkenstein]

@DevMostafaNassar Thanks alot for trying to help! I really appreciate it!
Unfortunately, the workaround didn't work for my case 😞

Maybe it helps the others though, @Isaac-Tait?

[Quentin-Danjou]

Any updates on having a fix for this?

It is quite annoying to not have the image correctly rendered with a ratio correctly being set on desktop and mobile.
A good example is hero banners on website homepages being more vertical on mobile compared to desktop.

Setting withArtDirection with a default image being desktop makes it very small for mobile and in the opposite setting it with the default mobile makes it huge vertically on desktop.

There is currently no workaround found that does not have an important performance impact (rendering manually the image after hydration based on media queries and without using withArtDirection) — this is quite annoying as we are talking about hero banner (probably one of the most important assets for websites).

Tagging you @pieh as I see you are the most active currently in the gatsby project!

[Isaac-Tait]

@Quentin-Danjou I was able to fix my broken logo by adding objectFit='scale-down' (docs) to the component.

#31775 (comment)

Did that not work for you? What version of Gatsby are you using?