I have a React SimpleImage component which uses srcSet
to use the srcset property on the img.
The component has the code:
const image = (<img
{...imageStyle}
src={src}
srcSet={srcsetStr}
alt={alt}
width={width}
height={height}
role="presentation"
onLoad={onLoad}
onError={onFail}
/>);
The image is placed in a div
:
return (<div {...wrapperStyle}>
{statusIndicator}
{image}
</div>);
The wrapperStyle is defined as:
const mainWrapperStyle = style({
backgroundColor: 'white',
backgroundSize: 'contain',
backgroundRepeat: 'none',
boxSizing: 'border-box',
position: 'relative',
width,
height,
}
The width on the div is the same as the width on the img
..
I get an error in the generated markup's srcsert
property which looks like this:
<img
srcset=" https://webkit.org/demos/srcset/image-src.png 1x
https://webkit.org/demos/srcset/image-2x.png 2x
https://webkit.org/demos/srcset/image-3x.png 3x
https://webkit.org/demos/srcset/image-4x.png 4x" width="800px"
height="800px" role="presentation"
src="https://webkit.org/demos/srcset/image-src.png"
data-css-44fijj="[* + *]"
>
I have an error here:
DOMPropertyOperations.js?17f3:142 Failed parsing 'srcset' attribute value since it has an unknown descriptor.
Use srcSet
instead of srcset
:
<img
srcSet=" https://webkit.org/demos/srcset/image-src.png 1x
https://webkit.org/demos/srcset/image-2x.png 2x
https://webkit.org/demos/srcset/image-3x.png 3x
https://webkit.org/demos/srcset/image-4x.png 4x" width="800px"
height="800px" role="presentation"
src="https://webkit.org/demos/srcset/image-src.png"
data-css-44fijj="[* + *]"
>