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 <[email protected]>

Author: MikhailZakharov-dev

src/components/LazyLoadImage.jsx

@@ -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
@@ -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,