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

Not stale - the issues is still persisting

Still having this issue, on Gatsby ^4.0.0

I’m experiencing this error as well.

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)

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.

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.

Is it possible to get a minimal reproduction?

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.

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® Core™ 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