Gatsby Images not showing on first load when using Styled Components
See original GitHub issueDescription
Hi everyone,
I set up a gatsby blog site using blog starter and hooked it up to Netlify CMS. I am having an issue with displaying images on the index page.
When the page first loads, none of the images on index page would show. If I navigate to other pages and come back to the index, it all appears. It is happening on live site and works fine in dev environment. All images are being sent from CMS as markdown file.
I followed an instruction on here: https://github.com/gatsbyjs/gatsby/issues/3545
and ran yarn add git://github.com/lfittl/hast-to-hyperscript
but it didn’t fix:(
I have asked this in Netlify community but was told to open an issue here since this is a bug on Gatsby side.
Live site:
Dev environment:
Thank you and please let me know if there’s anything else I can provide.
Steps to reproduce
Here’s the link to the site: https://hardcore-wiles-235b68.netlify.com
I was able to get images to show up by inserting a style tag to the article element like this:
<article style={{ width:
50% }} key={node.fields.slug}>...</article>
but if I use styled components:
const Panel = styled.article`
width: 50%;
`
<Panel key={node.fields.slug}>...</Panel>
the styling gets ignored and image and wrapping div width is set to 0.
Also, jlengstorf at Netlify community pointed out that Gatsby is adding aria-hidden
attributes and not respecting the height/width.
I have ran gatsby build
and gatsby serve
to serve it locally but no images showed on first load.
Repo for this project: https://github.com/hoshikitsunoda/blog-gatsby-netlifycms
Expected result
It should show all the images when the page loads.
Actual result
No images are shown. Image data is there but the dimension is set to 0x0.
Environment
System:
OS: macOS Sierra 10.12.6
CPU: (8) x64 Intel(R) Core(TM) i7-3615QM CPU @ 2.30GHz
Shell: 5.2 - /bin/zsh
Binaries:
Node: 10.16.3 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.13.6 - /usr/local/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 79.0.3945.130
Safari: 11.0
npmPackages:
gatsby: ^2.19.10 => 2.19.10
gatsby-background-image: ^0.9.13 => 0.9.13
gatsby-cli: ^2.8.28 => 2.8.28
gatsby-image: ^2.2.39 => 2.2.39
gatsby-plugin-feed: ^2.3.26 => 2.3.26
gatsby-plugin-google-analytics: ^2.1.34 => 2.1.34
gatsby-plugin-manifest: ^2.2.40 => 2.2.40
gatsby-plugin-netlify-cms: ^4.1.37 => 4.1.37
gatsby-plugin-netlify-cms-paths: ^1.3.0 => 1.3.0
gatsby-plugin-offline: ^3.0.33 => 3.0.33
gatsby-plugin-react-helmet: ^3.1.21 => 3.1.21
gatsby-plugin-sharp: ^2.4.3 => 2.4.4
gatsby-plugin-styled-components: ^3.1.18 => 3.1.18
gatsby-plugin-typography: ^2.3.21 => 2.3.21
gatsby-remark-copy-linked-files: ^2.1.36 => 2.1.36
gatsby-remark-images: ^3.1.43 => 3.1.43
gatsby-remark-prismjs: ^3.3.30 => 3.3.30
gatsby-remark-relative-images: ^0.2.3 => 0.2.3
gatsby-remark-responsive-iframe: ^2.2.31 => 2.2.31
gatsby-remark-smartypants: ^2.1.20 => 2.1.20
gatsby-source-filesystem: ^2.1.47 => 2.1.47
gatsby-transformer-remark: ^2.6.48 => 2.6.49
gatsby-transformer-sharp: ^2.3.13 => 2.3.13
npmGlobalPackages:
gatsby-cli: 2.8.25
Update(02-03-2020): I swapped the element from article
to regular div
styled with styled components
, still no image shown.
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (3 by maintainers)
Top GitHub Comments
I’m not entirely sure. My guess would be that gatsby is doing something in the build phase which means that some components are being pre-generated (using gatsby-config.js) and styled components isn’t being used at this point (after all, it just ends up as css in the end). Maybe
styled(Button)
is generated differently tostyled.button
.This is just a guess though. I don’t know the inner workings of gatsby or styled-components well enough to say anything for certain about the specific reasons behind this problem.
Glad it’s working now though!
Oh wow, it works now! Thank you so much for your help @danspratling !! I’m curious why it only affected this image wrapper element though?
styled components
was working on all other elements.