+1

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.

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) ;
}
}`