Component with effect has a wrapping span with custom styles predefinedSee original GitHub issue
effect property defined (e.g.
"opacity"), the image is wrapped with a span (where all the corresponding classes are applied (e.g.
lazy-load-image-loaded)). Said span comes with some styles already defined in the component, as seen in method
getWrappedLazyLoadImage() of LazyLoadImage.jsx. This raises problems when the wrapping element is expected to have its default behavior. In my case, I needed it to stay displayed as a
block (as an would be), but instead it becomes an
inline-block. In my case it breaks my view (see screenshot below)
<LazyLoadImage src="test.jpg" alt="Test" effect="opacity" />
Expected behavior The wrapping element shouldn’t change how the component is rendered.
Perhaps the style for the wrapper should be defined in the CSS of each effect instead.
- Package version: 1.3.2
- Server Side Rendering? No
- Device: any
- Operating System: doesn’t apply
- Browser: happens with both Firefox and Chrome
Maybe it is related -or can be circumvented- if #31 is implemented
- Created 4 years ago
- Comments:13 (7 by maintainers)
Top GitHub Comments
@Aljullu Ahh perfect. Thank you so much! I will use the workaround for now. I think I was just missing the “!important” part and it was blocking me. Still learning over here!
I’ll keep an eye on this issue just in case you decide to pass the placeholder and wrapper props. Thanks again!