Skip to content

Commit

Permalink
fix(LazyLoadImage): SSR Warning: Prop style did not match (#104)
Browse files Browse the repository at this point in the history
react doesn't apply style attributes with empty value (empty string) in
markup, but still make a strict comparison and try to find
background size and background image properties when hydrating client.

Warning: Prop style did not match. Server: "color:transparent;
display:inline-block;height:244;width:244" Client: "background-image:;
background-size:;color:transparent;display:inline-block;
height:244;width:244"

Co-authored-by: mikhail_zakharov <mikhail@getic.eu>
  • Loading branch information
MikhailZakharov-dev and mikhail_zakharov committed Jul 17, 2022
1 parent 0b2e6d8 commit 3bd514f
Showing 1 changed file with 6 additions and 6 deletions.
12 changes: 6 additions & 6 deletions src/components/LazyLoadImage.jsx
Expand Up @@ -95,6 +95,11 @@ class LazyLoadImage extends React.Component {
const { loaded } = this.state;

const loadedClassName = loaded ? ' lazy-load-image-loaded' : '';
const wrapperBackground = loaded || !placeholderSrc ? {} :
{
backgroundImage: `url(${placeholderSrc})`,
backgroundSize: '100% 100%'
}

return (
<span
Expand All @@ -105,12 +110,7 @@ class LazyLoadImage extends React.Component {
loadedClassName
}
style={{
backgroundImage:
loaded || !placeholderSrc
? ''
: `url(${placeholderSrc})`,
backgroundSize:
loaded || !placeholderSrc ? '' : '100% 100%',
...wrapperBackground,
color: 'transparent',
display: 'inline-block',
height: height,
Expand Down

0 comments on commit 3bd514f

Please sign in to comment.