React component that render
<img>with nicer interface
$ npm install --save super-imageThis package use Object.assign(), so you may need to polyfill via object.assign.
<SuperImage
src="image.png"
width="160"
height="90"
alt="super-image"
fit="contain"
/>Set sources property.
<SuperImage
src="image.png"
sources={[{
srcSet : 'image.webp',
type : 'image/webp'
}]}
width="160"
height="90"
alt="super-image"
fit="contain"
/>Set fitFallback property true.
<SuperImage
fitFallback
src="image.png"
width="160"
height="90"
alt="super-image"
fit="contain"
/>| Property | Type | Description | Default value | Required |
|---|---|---|---|---|
| src | String | Image url | - | Yes |
| sources | Array | Sets of <source> attributes: srcSet, sizes, media and type |
[] |
No |
| width | DOMString |
Image width | - | No |
| height | DOMString |
Image height | - | No |
| alt | String | Alternative text for <img> |
"" |
No |
| role | String | WAI-ARIA for <img> |
- | No |
| className | String | className property for component |
"" |
No |
| flexible | Boolean | Make component fluid | false |
No |
| fit | String | CSS object-fit property for <img> (contain or cover) |
- | No |
| fitFallback | Boolean | Force component to use background-image |
false |
No |
MIT © FRESH!
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent