qm-ui/src/QMImg.js

千米公有云管理端UI基础组件库

/**
 * @author  gcy[of1518]
 * @date  17/2/15
 * @description
 */
import React, { Component } from 'react'
import QMConst from './QMConst'

import { splitObject } from './_util/ObjectUtil'

//default src
const DS = '//img.1000.com/qm-a-img/prod/default.jpeg'

export default class QMImg extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    let [{ src, host, rule }, props] = splitObject(this.props, ['src', 'host', 'rule'])
    return <img {...props} src={getPath({ host, src, rule })} />
  }
}

/**
 * 包装img url
 * 支持格式如下:
 * 千米图片地址:
 * 878358/e363762b1ec888af132b7ff16aaa556b.jpg
 * /878358/e363762b1ec888af132b7ff16aaa556b.jpg
 * //img.1000.com/qm-a-img/prod/1201533/57a62165494972d8090e40dc32a2c2ff.jpg
 * http://img.1000.com/qm-a-img/prod/1201533/57a62165494972d8090e40dc32a2c2ff.jpg
 *
 * 外部地址:
 * http://img12.360buyimg.com/n12/jfs/t5149/305/968034028/176199/ed4464cb/5909afaaNcc2ced8e.jpg
 *
 * 千米图片地址支持Rule,外部地址不支持Rule
 *
 * @param {Object} opt
 */
const getPath = opt => {
  let { host, src, rule } = opt || {}
  if (!src) {
    // 地址为空时使用默认图片
    return DS + (rule || '')
  } else if (src.includes('//')) {
    // 绝对路径
    let domain = QMConst.get(['host', 'v_oss_domain_img'])
    // 千米图片服务器支持Rule,其他(如: 京东、淘宝、天猫)Rule语法不同,不支持Rule
    if (domain && src.includes(domain)) {
      return src + (rule || '')
    }
    return src
  } else {
    // 相对路径

    let domain = QMConst.get(['host', 'v_oss_domain_img']) || ''
    let path = host || QMConst.get(['host', 'v_oss_path_img']) || ''

    // 以"/"开头的,去掉"/"
    if (src.substr(0, 1) == '/') {
      src = src.substr(1)
    }

    let url = src || DS
    if (url && typeof url == 'string') {
      url = domain + path.replace('${filePath}', url)
    }
    return url + (rule || '')
  }
}

QMImg.src = getPath