Image

> 支持自动重试和手动重试的图片组件


安装

``php
npm i -S xr-image
`

使用

`typescript
import Image from 'xr-image'

const img = new Image({
src: string;
el?: HTMLElement | string; // 挂在对象 字符串选择器 或 Element 元素
alt?: string;
reloadAttempts?: number; // 重试次数，默认 10 次
retryInterval?: number; // 重试间隔，默认 500ms
tsParam?: string; // 重试 url 时间戳 key 名，默认 t
width?: number | string; // 加载中和错误时的宽度，默认 110px。加载成功会去除
height?: number | string; // 加载中和错误时的高度，默认 110px 。加载成功会去除
cls?: string; // class
style?: Partial; // 样式
shape?: 'round' | 'circle' | 'square'; // 默认 square 没有圆角
onError?: (img: Image, ev: ErrorEvent) => any; // 错误时，最后一次失败不会触发
onFinalError?: (img: Image, ev: ErrorEvent) => any; // 最后一次重试失败触发
onClick?: (img: Image, ev: MouseEvent) => any;
onLoad?: (img: Image) => any;
})

// 当全部失败时显示错误 UI。用户点击会重置错误重试次数并重试。
`

API

`typescript
dom: HTMLImageElement; // 图片元素
isLoading: boolean;
isError: boolean;

reload(): void; // 重试
resetAttempts(): void; // 重置重试次数
destroy(): void; // 销毁
addCls(cls: string): void;
removeCls(cls: string): void;
addStyle(style: Partial): void // 添加样式
mount(dom: HTMLElement | string): void; // 如 el 参数
switch(src: string): void; // 切换图片
``