htmlimagereactjssrcset

srcset not working on img


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.

Solution

  • 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="[* + *]"
    >
    

    More info in the react docs.