网络问卷调查开发

baseComponents/ImageLoader/index.js

+/***
+ * H5图片自适应渲染组件利用 img onload事件,未经使用 需要验证
+ * 钟是志
+ * 2020年4月15日 15:11:20
+ *
+ * */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import demoImage from './2331.png';
+
+export default class ImageLoader extends React.Component {
+  componentDidMount() {
+    const {width, height} = this.props;
+    this.image.onload = () => {
+      const { clientWidth, clientHeight } = this.image;
+      let isWidthBig = clientWidth >= clientHeight;
+      if(isWidthBig){ // 图片宽更大的时候
+        this.image.style.width = width;
+        this.image.style.height = 'auto';
+      }else{  // 图片高更大的时候
+        this.image.style.width = 'auto';
+        this.image.style.height = height;
+      }
+      this.image.style.visibility = 'visible';
+    };
+    this.image.onerror = () => {
+      this.image.style.visibility = 'visible';
+    }
+  }
+
+  render() {
+    const { width, height, url, divStyle } = this.props;
+    return (<div style={{
+      width,
+      height,
+      lineHeight: height,
+      ...divStyle,
+    }}>
+      <img src={url} alt={'预览图片'}
+           style={{ visibility: 'hidden'}}
+           ref={(image)=> this.image = image}/>
+    </div>);
+  }
+}
+
+ImageLoader.propTypes = {
+  width: PropTypes.string.isRequired, // 图片显示的宽
+  height: PropTypes.string.isRequired,  // 图片显示的高
+  url: PropTypes.string.isRequired, // 图片src地址
+  divStyle: PropTypes.object, // 外部div的样式
+};
+ImageLoader.defaultProps = {
+  height: '50px',
+  width: '100%',
+  url: demoImage,
+  divStyle: {
+    textAlign: 'center',
+    margin: '0 auto',
+  }
+};
+
+