Open Isaac-Tait opened 3 years ago
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
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! 💪💜
This issue is not stale, I am still experiencing the issue with the logo...
I'm experiencing this error as well.
@aaronaustin Would you mind running gatsby info --clipboard
and posting the results here? I am curious if this could be a plugin conflict issue...
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
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! 💪💜
Not stale, still an issue
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
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.
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! 💪💜
Not stale - the issues is still persisting
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.
Is it possible to get a minimal reproduction?
@wardpeet Here you go https://github.com/Isaac-Tait/gatsby-image_mimimum_repro
Still having this issue, on Gatsby ^4.0.0
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
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.
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)
@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...
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.
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 😞
@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} />
@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?
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!
@Quentin-Danjou I was able to fix my broken logo by adding objectFit='scale-down' (docs) to the
https://github.com/gatsbyjs/gatsby/issues/31775#issuecomment-1035043052
Did that not work for you? What version of Gatsby are you using?
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:
If I open dev tools within localhost and edit the
gatsby-image-wrapper
fromconstrained
tofull_width
then the logo is rendered "correctly". However, if I update within my codeconstrained
tofull_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 togatsby-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 withgatsby clean
and restart of localhost) and ChunkLoadErrors (as mentioned above in DescriptionEnvironment
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