Placeholder props not working

[abhishek2524]

<LazyLoadImage
        src="https://cdn.pixabay.com/photo/2016/04/04/14/12/monitor-1307227_960_720.jpg"
        key={1}
        alt={`simple`}
        // effect="opacity"
        // effect="blur"
        placeholderSrc={<div>Loading......</div>}
        placeholder={<div>Wait......</div>}
      />
      Please help!

[virtyaluk]

Doesn't work for me aswell.

[ThomasFoydel]

I'm getting the same issue, though I'm passing a component for the placeholder and a string (a url) for the placeholderSrc, neither show up. Currently I'm conditionally rendering a loading spinner, and then changing a state value with afterLoad and then using that state value to conditionally hide the loadingspinner, but it is hacky and somewhat difficult to style

[alan-artemest]

The issue here is that the final img content - in case of placeholder prop specified - replaces the placeholder once intersected, then you need waiting for the img loading time. That would not the way this library should working: the correct way is the one implemented via placeholderSrc

[sergiors]

Anyone solve the problem?

[lagroms]

Same here, not working

[retardH]

Same here, not working till now.

[jotacodestudio]

Thanks for addressing this matter. While it looks like several of you are affected by this, it's still not clear to us what the exact issue is. Any help clarifying the problem would be greatly appreciated.

I tested the code provided by @abhishek2524, and it functions as anticipated on my end. Please note that the placeholder is only displayed until the image loads. You might want to take a look at "All images are loaded at once" (https://github.com/Aljullu/react-lazy-load-image-component?tab=readme-ov-file#all-images-are-being-loaded-at-once) in our Common errors docs, as this is a common source of confusion: if at some point the placeholder of LazyLoadImage is in the viewport, it will switch to the element and the placeholder won't be shown anymore.

[rendermouse]

Is there no way to keep the placeholder displayed until the src image is fully loaded? It seems to swap out the placeholder the instant the main image starts to load, which means that the placeholder is only rendered outside of the viewport...as @alan-artemest mentioned earlier.