Gatsby Images not showing on first load when using Styled Components

[hoshikitsunoda]

Description

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.

[danspratling]

You just have a styling issue. Everything is working as expected with gatsby image.

When using fluid images, they will stretch to fill the container. The container is defined by the content within it but because you're using fluid widths, it's got nothing to guide it.

If you add text below you should see that the image will appear above because it now has some guiding content to use.

To fix this, you can set the article to have a min-width: 100% so that the content is always filling the container, even if there's no text, but the image still acts fluidly.

[hoshikitsunoda]

@danspratling Thank you for the reply!

I added min-width: 100% to article element but no image shown:( Tested on both live site and gatsby serve

The article tag is not even including the styling at all.

[danspratling]

Just checked your repo.

It looks like you weren't including the plugin in the gatsby-config.js file If you add in gatsby-plugin-styled-components to the list of plugins it should work as you were expecting.

[hoshikitsunoda]

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.

[danspratling]

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 to styled.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!