Image

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

安装

npm i -S xr-image

使用

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<CSSStyleDeclaration>; // 样式
  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

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

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