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!
Top comments (13)
I’m not sure exactly where you’re having issues, but I did a write up on my experiences (and errors) when using Gatsby image. Feel free to look through and see if some of the sample code/explanations match your use case.
Rewriting A Static Website Using Gatsby and GraphQL - Part 3
Laurie ・ Mar 5 '19
My biggest question is why the fluid images disappear when I try to float them?
So Gatsby image has a wrapper tag that you can see in the inspector. Depending on the defaults set for those classes that may be the issue. I’d take a look there first.
I can't point you to anything specific, but I do know that you shouldn't ALWAYS be using the gatsby-image plugin, especially if you're using pagination. I think it's one of those where you have to grind through it for a while before you're really comfortable with it. I'm most of the way through Jason Lengsdorf's Gatsby workshop on Frontend Masters and there's a pretty lengthy section on images, so I'll report back if there's anything key that I find out from there.
I ended up using flexbox instead of floats, and it worked fine.
That'll do it; you don't want to use floats in this day and age unless you absolutely, positively have to.
Floats are nice for wrapping text around images though.
As said from others, probably your issue is understanding how gatsby-image is composed, to make it fit in a float involved section. A good starting point is forgetting about floating, and try flexbox grid.
Another good point is: you don't always need gatsby image component, if you need a bg image, you can obtain only the src from the query. Or use gatsby-image without the resizing parameters, and it should adapt to any width of the container you put it in.
I ended up using flexbox instead of floats, and it worked fine.
Hi Brian,
Do you have a Github repo with your code on it? might be able to get around the floats with flexbox/grid.
I ended up using flexbox instead of floats, and it worked fine. I just wasn't able to have the text wrap around it nicely. Not sure how to do that in flexbox just yet.
Great, I found this useful learning flexbox - flexbox.io/
Gatsby Images is a horrible piece of software, indeed.