2023-06-14

king

2023-06-14 08cce3334a2dc81d690b518136b0aaea64e48b0b

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import React, {Component} from 'react'
import PropTypes from 'prop-types'
 
import LostPng from '@/assets/img/lost.png'
import MKEmitter from '@/utils/events.js'
 
import './index.scss'
 
class MkPicture extends Component {
  static propTpyes = {
    style: PropTypes.object,
    scale: PropTypes.bool,
    url: PropTypes.string,
    urls: PropTypes.array,
  }
 
  state = {
    url: '',
    lost: false
  }
 
  UNSAFE_componentWillMount() {
    const { url } = this.props
 
    if (url) {
      this.setState({url: url, lost: false})
      this.checkUrl(url)
    } else {
      this.setState({url: LostPng, lost: true})
    }
  }
 
  UNSAFE_componentWillReceiveProps (nextProps) {
    if (nextProps.url) {
      if (nextProps.url !== this.state.url) {
        this.setState({url: nextProps.url, lost: false})
        this.checkUrl(nextProps.url)
      }
    } else {
      this.setState({url: LostPng, lost: true})
    }
  }
 
  checkUrl = (url) => {
    let img = new Image()
    img.addEventListener('error', this.loadHandler)
 
    if (/^https/.test(window.location.protocol)) { // https转换
      if (/^http:/.test(url)) {
        img.src = url.replace(/^http:/, 'https:')
      } else if (/^\/\//.test(url)) {
        img.src = 'https:' + url
      } else {
        img.src = url
      }
    } else {
      img.src = url
    }
  }
 
  loadHandler = (e) => {
    this.setState({url: LostPng, lost: true})
  }
 
  render() {
    const { style, scale, urls } = this.props
    const { url, lost } = this.state
 
    return (
      <div
        className={'ant-mk-picture' + (scale ? ' scale' : '') + (lost ? ' lost' : '')}
        onClick={(e) => {
          if (!scale) return
 
          e.stopPropagation()
 
          MKEmitter.emit('mkImageScale', url, urls)
        }}
        style={{...style, backgroundImage: `url('${url}')`}}
      ></div>
    )
  }
}
 
export default MkPicture