Skip to content

Commit 3bd514f

Browse files
MikhailZakharov-devmikhail_zakharov
and
mikhail_zakharov
authored
fix(LazyLoadImage): SSR Warning: Prop style did not match (#104)
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>
1 parent 0b2e6d8 commit 3bd514f

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

src/components/LazyLoadImage.jsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,11 @@ class LazyLoadImage extends React.Component {
9595
const { loaded } = this.state;
9696

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

99104
return (
100105
<span
@@ -105,12 +110,7 @@ class LazyLoadImage extends React.Component {
105110
loadedClassName
106111
}
107112
style={{
108-
backgroundImage:
109-
loaded || !placeholderSrc
110-
? ''
111-
: `url(${placeholderSrc})`,
112-
backgroundSize:
113-
loaded || !placeholderSrc ? '' : '100% 100%',
113+
...wrapperBackground,
114114
color: 'transparent',
115115
display: 'inline-block',
116116
height: height,

0 commit comments

Comments
 (0)