Placeholder component doesn't show

[LouiseReid]

Using this code, can you tell me why the placeholder doesn't show? I've attempted using placeholder and placeholderSrc. My expected behaviour would be to see loading text on screen before the image renders

              <LazyLoadImage
                src={image.uri}
                key={index}
                alt={`${title}`}
                onClick={() => handleImageClick(image.uri)}
                effect="blur"
                placeholderSrc={<h1>loading...</h1>}
                placeholder={<h1>test</h1>}
              />

Technical details:

• Package version ^1.4.3
• Server Side Rendering? no
• Device desktop
• Operating System Mac OS
• Browser Chrome

[tomasztomys]

+1

[Aljullu]

Right... that's because we set the text color to transparent. I created a PR to remove it (#73), but will need some more testing before being able to release.

For now, you can override that with CSS:

.lazy-load-image-background {
  color: inherit !important;
}

Btw, from the code above: placeholderSrc only accepts a string, which should be the src of the placeholder. If you want to render an element or a component, you only need to use placeholder.

[thuyetlamm]

I encountered this problem and this is how I solved it. I find it works very well
<LazyLoadImage src={url} alt={alt} width={'100%'} height={'100%'} delayTime={500} wrapperProps={{ opacity: 0.7, }} wrapperClassName={styles['wrapper']} threshold={90} style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '0.5rem', verticalAlign: 'middle', borderStyle: 'none', ...style, }} effect={'blur'} placeholderSrc={placeholder} {...props} />

For now, you can override that with CSS:
`
span.wrapper[style*="background-image"] {
border-radius: 0.5rem;
animation: fill 0.5s ease-in-out 0.5s forwards;
}

@Keyframes fill {
from {
filter: blur(15px);
}
to {
filter: blur(0px) ;
}
}`