IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
xy-image
图片组件
特性
- 错误图像显示
- 响应图片, 根据媒体查询显示不同的图片
- Placeholder 图片占位符
安装
# yarn yarn add xy-image
使用例子
;;;// 加载样式;ReactDOM.render, 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
开发
yarn run start
例子
测试
yarn run test
开源许可
xy-image is released under the MIT license.