Component with effect has a wrapping span with custom styles predefined about react-lazy-load-image-component

[Aljullu]

@asimoesmcartor the display: inline-block is required to make the placeholder visible. The placeholder is a <span> with a background image but no content, so it needs to be a block to have height and width. I used inline-block instead of block to replicate better the default behavior of images, which are inline according to browser default styles.

I'm considering to add a placeholderProps or wrapperProps prop so the style and other attributes can be overwritten. I guess that would be good enough to solve your issues here.

In the short term, you can set:

.lazy-load-image-background {
  display: block !important;
}

in your CSS and that would overwrite the default display value set by the library.

[asimoesmcartor]

@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!

[Aljullu]

@Aljullu May I raise a PR with wrapperProps?

Sure, that would be awesome! There is a WIP PR about adding loadedImageProps and placeholderProps 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]

Perhaps the style for the wrapper should be defined in the CSS of each effect instead.

This would be a good solution, the only issue I see is that the wrapper element is also used when placeholderSrc is defined, even if there is no effect. So we would need to create a new CSS file and ideally only import it if the wrapper element is displayed.

Thanks for filling this issue @elamperti, will mark it as enhancement in case I have time in the future or somebody is willing to pick it up!

[asimoesmcartor]

@Aljullu I am also running into a similar issue caused by the pre-defined styles in the LazyLoadImage.jsx file on line 77.

Is there any way that you could remove the "display:inline-block" style in that span?

Or could you give more context on why you added this style?

[BilyachenkoOY]

@Aljullu May I raise a PR with wrapperProps?

[BilyachenkoOY]

@Aljullu, yeah I missed #46. I think placeholderProps should be enough

[johnstonbl01]

@Aljullu 👋 Hey there! Would it be OK if I worked on the wrapperProps PR?

[Aljullu]

Sure thing @johnstonbl01! I'm happy to review any new PRs that are pushed to the repo. Make sure to take a look at #46 in case you think that might be good enough for your use-case. Otherwise maybe it's a good base to start from. It has got big conflicts but I think it's just formatting (spaces → tabs).

[johnstonbl01]

Will do - thanks!

[Aljullu]

A beta version with the new wrapperProps prop is available in NPM. You can get it from:

$ npm i [email protected]

Thanks @johnstonbl01 for the contribution.

[JayBox325]

@Aljullu Thanks for adding this, can you please add an example to the docs for how to use the wrapperProps object as I haven't been able to get it working with different tries. Thanks

[Powerinno]

It still has an inline-block display but, it is not in a CSS class, is inline style. Can anyone show me how could I remove it? https://github.com/Aljullu/react-lazy-load-image-component/blob/master/src/components/LazyLoadImage.jsx - line 115