Open sudopseudocode opened 5 years ago
Note: gatsby-image is not a drop-in replacement for
<img />
. It’s optimized for fixed width/height images and images that stretch the full-width of a container. Some ways you can use<img />
won’t work with gatsby-image.
From https://www.gatsbyjs.org/packages/gatsby-image/
Without looking into the source for gatsby-image
I can't say what's happening exactly, but I suspect it has something to do with their optimisation path.
@jossmac Thanks for your response. According to the docs, it looked like this should be working as it is optimized also for stretching into the full-width of a container, which is supplied in the example code.
I'll have to check back into the project that I was working on and see if it is just the gatsby-image implementation causing this bug, as you said.
Again, thanks!
My apologies if I am missing something obvious here, but I have been trying to figure this out for a while after looking at the examples in the documentation. I tried to use the same styles as the Alternative Media custom View example from the docs. Perhaps I am missing the correct styles.
Any help would be greatly appreciated! Perhaps we can include another example in the docs with just this simple use case. I think a lot of people would want to replace the View with the sole purpose of having their own lazy-loading or something.
Steps to reproduce the behavior: 1) With code like this:
Expected behavior: The View component should look the same as the default View (in terms of CSS), but with a new Img component instead.
Actual behavior: The Modal opens with no image rendered and the navigation buttons are directly in the center since the View has no width.