xy-image
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published
IE Chrome Firefox Opera Safari
IE 10+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔

NPM version node version npm download

xy-image

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;
}

开发

yarn run start

例子

http://localhost:6006

测试

yarn run test

开源许可

xy-image is released under the MIT license.

Package Sidebar

Install

npm i xy-image

Weekly Downloads

10

Version

1.2.0

License

MIT

Unpacked Size

15.8 kB

Total Files

12

Last publish

Collaborators

  • xueyou2000