# Img

Img 组件，使用缓存、优化 `<img />` 资源不可达问题。

## 使用场景

界面包含大量图片元素时使用，替代原生 `<img />` 标签。

> 默认使用全局 `imageCache`，在整个系统中，只会存在一个 `imageCache`，用于标识当前资源加载状态，`key` 为图像的资源 `url`。

```js
const imageCache = {
  'https://tinypng.com/images/image-resizing-api.png': true // 表示图像加载成功
};
```

## 案例演示

### Img 基本使用

---demo
```js
import { Img, Spin, NestedSpin } from 'amos-framework';

// 该图片不存在
const image404 = 'https://tinypng.com/images2/image-resizing-api.png'
const image2 = 'https://tinypng.com/images/image-resizing-api.png'

ReactDOM.render((
  <div style={{ width: '100%', display: 'flex', padding: '1em' }}>
    显示图片: <Img style={{ width: 100, height: 151 }} src="https://tinypng.com/images/pro/panda-pro.png" />
    不显示任何东西: <Img style={{ height: 100  }} src={[image404, image2]} />
  </div>
), _react_runner_);
```
---demoend

### 缓慢加载图片

---demo
```js
import { Img, Spin, NestedSpin } from 'amos-framework';

class Wrap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      random: Math.random()
    };
  }

  render() {
    return (
      <div
        style={{
          display: 'inline-flex',
          justifyContent: 'center',
          alignItems: 'center',
          flexDirection: 'column',
          height: 300,
          width: 180
        }}
      >
        {this.props.children({ random: this.state.random })}
        <button onClick={() => this.setState({ random: Math.random() })}>Reload</button>
      </div>
    )
  }
}

// http://www.deelay.me/ 模拟延时访问

ReactDOM.render((
  <div style={{ width: '100%', display: 'flex', padding: '1em' }}>
    <Wrap>
      {({ random }) => (
        <Img
          loader={<Spin type="scale" />}
          src={`http://www.deelay.me/5000/https://tinypng.com/images/pro/panda-pro.png?v=${random}`}
          width="180"
          height="270"
          key={random}
        />
      )}
    </Wrap>
  </div>
), _react_runner_);
```
---demoend

### 自定义渲染 img 外层容器

---demo
```js
import { Img, Spin, NestedSpin } from 'amos-framework';

class Wrap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      random: Math.random()
    };
  }

  render() {
    return (
      <div
        style={{
          display: 'inline-flex',
          justifyContent: 'center',
          alignItems: 'center',
          flexDirection: 'column',
          height: 300,
          width: 180
        }}
      >
        {this.props.children({ random: this.state.random })}
        <button onClick={() => this.setState({ random: Math.random() })}>Reload</button>
      </div>
    )
  }
}

ReactDOM.render((
  <div style={{ width: '100%', display: 'flex', padding: '1em' }}>
    <Wrap>
      {({ random }) => (
        <Img
          loader={<Spin type="scale" />}
          src={`https://tinypng.com/images/pro/panda-pro.png?v=${random}`}
          width="180"
          height="270"
          key={random}
          enableGC
          customRender={(children, isLoaded) => <NestedSpin spinning={!isLoaded}>{children}</NestedSpin>}
        />
      )}
    </Wrap>
  </div>
), _react_runner_);
```
---demoend

## props

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| src | `String or String[]` | - | 图像资源地址，如果设置为数组，则从第一个图像开始加载，直到加载成功为止 |
| loader | node | - | 正在加载时的渲染节点 |
| unloader | node | - | 加载失败时的渲染节点 |
| decode | boolean | - | 使用 `Image.decode()` 进行图像解码 |
| enableGC | boolean | - | 启用缓存回收，优化 `imageCache` |
| crossorigin | string | - | 设置[CORS策略](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/crossorigin) |
| customRender | func | `v => v` | 自定义渲染，`(<img {...props} />, isLoaded) => Element` |
| loaderRender | func | - | loader 自定义渲染 `(loader) => Element`，用于设置自定义 Component 结构 |
| unloaderRender | func | - | unloader 自定义渲染 `(unloader) => Element`，用于设置自定义 Component 结构 |

其它：支持所有 `<img />` 支持的 props 属性。

> 注意，如果相同图片，之前存在加载失败的情况，后续将不再尝试加载。