Open
Description
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
Metadata
Metadata
Assignees
Labels
No labels
Projects
Milestone
Relationships
Participants
Activity
tomasztomys commentedon Jun 17, 2020
+1
Aljullu commentedon Jun 20, 2020
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:
Btw, from the code above:
placeholderSrconly 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 useplaceholder.thuyetlamm commentedon Jan 14, 2025
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) ;
}
}`