Images not showing on first load

[hoshikitsunoda]

Hi!
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 show. If I navigate to other page and come back to the index, it all appears. It is only happening on live site and 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:(

Also, I noticed that when it first loads, the blurred image fills up the page then disappears.

Here’s the link to the site: https://hardcore-wiles-235b68.netlify.com/

Any help would be appreciated. Please let me know if there’s anything else I can provide. Thank you!

[hoshikitsunoda]

I was able to kinda fix this by inserting style tag and set width to the article element that’s wrapping the image. If I used styled components, the styling for this article element is ignored.

I feel like there’s better way to handle this issue?

[perry]

hi @hoshikitsunoda, welcome.

I am seeing this on first load:

But, that said, I agree with you - the images are low-resolution and blurry at first, before coming in to focus.

First things first: does the site build and load properly on local?

[hoshikitsunoda]

Thanks @perry! Yes, it works properly on local.
I was able to get images to show up by inserting style tag to 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 width is set to 0. Any idea why this is happening?

[futuregerald]

@hoshikitsunoda did you use the browser inspector to see if the appropriate styles were being applied and what may be different locally vs what you have deployed? Also, please make sure you’re using the latest version of your packages.

[hoshikitsunoda]

Hi @futuregerald! Thank you for the reply.
Here’s the screen shots of local and live:

Local

Live

You can see the width property is not even there on live site and element dimension is 0x0.
I just ran yarn upgrade --latest but still didn’t fix. So far only way to get it to work is not to use the styled components.

I added another styled.article to the index page. Styling for this element is also removed once it’s deployed.

[futuregerald]

Hi,

Can you share a link to your repo? that way people can take a look at your source code.

[hoshikitsunoda]

Here’s the repo:

hoshikitsunoda/blog-gatsby-netlifycms

Thanks!

[jlengstorf]

hi, @hoshikitsunoda — if you run the build and serve it locally, do the images show up?

gatsby build
gatsby serve

From looking at the site, it appears that Gatsby is adding aria-hidden attributes and not respecting the height/width. This is probably worth bringing up to the Gatsby team (https://github.com/gatsbyjs/gatsby/issues), since that definitely shouldn’t be happening.

Let us know if your local production build is showing up properly.

Thanks!

[hoshikitsunoda]

Hi @jlengstorf, thank you for the reply!
I ran the commands and served it locally, no images shown and aria-hidden attribute is present.

Should I open an issue on their github?

[jlengstorf]

Yeah, that’s what I’d do at this point — this appears to be something funky with the gatsby-image package.

Thanks, and good luck!

[hoshikitsunoda]

Thank you! I’ll open an issue. My first issue on a public repo, pretty excited:)

[luke]

Hi, @hoshikitsunoda. Thank you for filing the issue. There is a solution posted there also:

Gatsby Images not showing on first load when using Styled Components

I hope it is okay I’m posting that here. That solution will likely be help to others with similar questions in the future. Thanks again creating that issue!

[hoshikitsunoda]

Hi @luke ! Thank you for the reply.
I actually submitted this issue after being advised to do so:)
Sorry I forgot to mention it here.
I appreciate your response!