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 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?
@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.
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.
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 (Issues · gatsbyjs/gatsby · GitHub), since that definitely shouldn’t be happening.
Let us know if your local production build is showing up properly.
Hi, @hoshikitsunoda. Thank you for filing the issue. There is a solution posted there also:
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!
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!