@jswork/react-image

react-image

Better image for react.

installation

npm install -S @jswork/react-image

properties

Name	Type	Required	Default	Description
className	string	false	-	The extended className for component.
objectFit	enum	false	'cover'	How an or should be resized to fit its container

usage

1. 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: ()

2. 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'));

documentation

• https://afeiship.github.io/react-image/

license

Code released under the MIT license.