react-lazy-load-image-component
react-lazy-load-image-component copied to clipboard
Unable to use renderToStaticMarkup() on <LazyLoadImage>
Bug description When building out a map I'm giving HTML to a marker with a LazyLoadImage. As you can guess only the fallback shows.
To Reproduce
const guideFallBackPic = 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png'
const photoURL = 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png'
const popupHtml = ReactDOMServer.renderToStaticMarkup(
<LazyLoadImage
src={photoURL}
placeholderSrc={guideFallBackPic}
alt={school.name}
effect='blur'
height={'110px'}
width={'110px'}
// visibleByDefault={true} // Does not hit fallback if `photoURL` is not valid.
style={{
backgroundSize: '110px',
backgroundImage: 'url()',
}}
/>
)
return (<div>{popupHtml}</div>)
List any other actions needed to reproduce the issue: Scrolling within the map does not show any image.
Expected behavior Expect a way to trigger a callback to load the image.
Screenshots If applicable, add screenshots to help explain your problem.
Technical details:
- Package version [1.5]
- Server Side Rendering? [No]
- Device [Smartphone]
- Operating System [Mac OS]
- Browser [Chrome]
Thanks for opening this issue @shadoath. Unfortunately, I'm not very familiar with ReactDOMServer so I don't think I will be able to fix this in the short term. If you want, feel free to contribute a PR and I will review it.
this fixed? i need use it with renderToStaticMarkup and ssr.