Xy-image NPM | npm.io


IE 10+ ✔	Chrome 31.0+ ✔	Firefox 31.0+ ✔	Opera 30.0+ ✔	Safari 7.0+ ✔

NPM version npm download

xy-image

图片组件

特性

错误图像显示
响应图片, 根据媒体查询显示不同的图片
Placeholder 图片占位符

安装

# yarn
yarn add xy-image

使用例子

import React from "react";
import ReactDOM from "react-dom";
import Image from "xy-image";
// 加载样式
import "xy-image/assets/index.css";
ReactDOM.render(<Image src="xx.png" />, container);

API

属性	说明	类型	默认值
querieConfigs	媒体查询配置	MediaQueryConfig[]	无
stop	阻止加载图片, 可通过此属性自行封装实现延迟加载图片	boolean	false
loadNode	加载内容, 图片加载中时显示的内容	React.ReactNode	无
failNode	错误内容, 图片加载失败时显示的内容	React.ReactNode	无
src	图像路径	string	无
alt	图片描述	string	无
crossOrigin	跨域源	"anonymous"/"use-credentials"	无
width	图片宽度	number/string	无
height	图片高度	number/string	无
onClick	点击事件	(e: React.MouseEvent<HTMLImageElement, MouseEvent>) => void	无
onLoad	图片加载完毕	() => void	无
onError	图片加载失败	() => void	无

MediaQueryConfig

export interface MediaQueryConfig {
    /**
     * 媒体查询
     * (min-width: 1500px) 字符串 或 1500 数值
     */
    querie: string | number;
    /**
     * 对应查询显示图片路径
     */
    src: string;
}