Better image for react.
npm install -S @jswork/react-image
Name | Type | Required | Default | Description |
---|---|---|---|---|
className | string | false | - | The extended className for component. |
objectFit | enum | false | 'cover' | How an or |
- import css
@import "~@jswork/wsui-frame-wrapper/dist/index.scss";
@import "~@jswork/react-figure/dist/style.scss";
@import "~@jswork/react-image/dist/style.scss";
// customize your styles:
$react-image-options: ()
- import js
import ReactDemokit from '@jswork/react-demokit';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactImage from '@jswork/react-image';
import './assets/style.scss';
class App extends React.Component {
render() {
return (
<ReactDemokit
className="p-3 app-container"
url="https://github.com/afeiship/react-image">
<p>
<ReactImage
style={{ width: 400, height: 200 }}
src="https://tva1.sinaimg.cn/large/006tNbRwly1gapa83qtc2j31670u0wsl.jpg"
/>
</p>
<p>
<ReactImage
objectFit="contain"
style={{ width: 400, height: 200 }}
src="https://tva1.sinaimg.cn/large/006tNbRwly1gapa83qtc2j31670u0wsl.jpg"
/>
</p>
</ReactDemokit>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
Code released under the MIT license.