Component with effect has a wrapping span with custom styles predefined
See original GitHub issueBug description
When a <LazyLoadImage> has an 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)
To Reproduce Create a <LazyLoadImage> with an effect and inspect it.
<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.
Screenshots
Technical details:
- 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
Issue Analytics
- State:
- Created 4 years ago
- Reactions:2
- Comments:13 (7 by maintainers)
Top GitHub Comments
Sure, that would be awesome! There is a WIP PR about adding
loadedImageProps
andplaceholderProps
which might be useful to use as a reference: #46.You can even use the
add/loaded-image-props
branch as a base if you want.master
would be fine as well.@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!