srcset 在 img 上不起作用

Question

我有一個React SimpleImage 組件，它使用srcSet來使用 img 上的 srcset 屬性。

該組件具有代碼：

const image = (<img
    {...imageStyle}
    src={src}
    srcSet={srcsetStr}
    alt={alt}
    width={width}
    height={height}
    role="presentation"
    onLoad={onLoad}
    onError={onFail}
  />);

圖像放置在div中：

return (<div {...wrapperStyle}>
    {statusIndicator}
    {image}
  </div>);

wrapperStyle 定義為：

const mainWrapperStyle = style({
    backgroundColor: 'white',
    backgroundSize: 'contain',
    backgroundRepeat: 'none',
    boxSizing: 'border-box',
    position: 'relative',
    width,
    height,
 }

div 上的寬度與img上的寬度相同。

我在生成的標記的srcsert屬性中收到一個錯誤，如下所示：

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

我這里有一個錯誤：

DOMPropertyOperations.js?17f3:142 Failed parsing 'srcset' attribute value since it has an unknown descriptor.

Answer 1

使用srcSet而不是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="[* + *]"
>

更多信息請參閱react文檔。

Answer 2

import meal1x from '../images/meal.jpg';
import meal2x from '../images/meal@2x.jpg';
import meal3x from '../images/meal@3x.jpg';

<img
    className='meal'
    src={meal1x}
    srcSet={`${meal1x} 1x, ${meal2x} 2x, ${meal3x} 3x`}
  />