Struggling with Gatsby Images

5/12/2019 · 1 minute read · 13 comments · 6137 views

Orginally posted on dev.to.


title: Struggling with Gatsby Images published: true description: Need some help! tags: #help, #webdev, #gatsby, #react

I’m really struggling to understand how Gatsby images, in particular the fluid images work. I love the fact that they hold their positions and load in with a blur effect. But, I don’t get the best way to display them or even how to at times…

I use the Img component in gatsby-image. But, sometimes I’m noticing it doesn’t show anything. Especially if I try to do something like float the image or try to make it full size (100% height/width.)

I have read the docs quite a bit, but I feel like it’s one of those things where something about it isn’t clicking. Where I’ve struggled the most on my project with Gatsby is playing with these images, trying to get them to do what I want. Everything else is pretty clear cut and makes sense to me.

I’ve poured over the docs and sifted through Google a lot. There’s not a whole lot other than the basics of how to use the Img component.

If anyone has experience or expertise with these, I’d love to pick your brain.

Thanks!