我有一个反应简单图像组件,该组件使用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>);
包装纸定义为:
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.
使用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文档中的更多信息。
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`}
/>