Skip to content

Unable to use renderToStaticMarkup() on <LazyLoadImage> #90

Open
@shadoath

Description

@shadoath

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]

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions