react-lazy-load-image-component icon indicating copy to clipboard operation
react-lazy-load-image-component copied to clipboard

Unable to use renderToStaticMarkup() on <LazyLoadImage>

Open shadoath opened this issue 3 years ago • 2 comments

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]

shadoath avatar May 27 '21 22:05 shadoath

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.

Aljullu avatar Aug 13 '21 19:08 Aljullu

this fixed? i need use it with renderToStaticMarkup and ssr.

romanown avatar May 31 '22 22:05 romanown