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.

    Install

    npm i xy-image

    DownloadsWeekly Downloads

    11

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    15.8 kB

    Total Files

    12

    Last publish

    Collaborators

    • xueyou2000