UNPKG

5.27 kBTypeScriptView Raw
1import { ComponentType, ImgHTMLAttributes } from 'react'
2import { StandardProps, CommonEventFunction } from './common'
3
4interface ImageProps extends StandardProps {
5 /** 图片资源地址
6 * @supported weapp, h5, rn, swan, alipay, tt
7 */
8 src: string
9
10 /** 图片裁剪、缩放的模式
11 * @default "scaleToFill"
12 * @supported weapp, h5, rn, swan, alipay, tt
13 * @rn 部分支持 scaleToFill, aspectFit, aspectFill, widthFix
14 */
15 mode?: keyof ImageProps.Mode
16
17 /** 默认不解析 webP 格式，只支持网络资源
18 * @default false
19 * @supported weapp
20 */
21 webp?: boolean
22
23 /** 默认不解析 svg 格式，svg 图片只支持 aspectFit
24 * @default false
25 * @supported rn
26 */
27 svg?: boolean
28
29 /** 图片懒加载。只针对 page 与 scroll-view 下的 image 有效
30 * @default false
31 * @supported weapp, swan, alipay, tt, h5
32 */
33 lazyLoad?: boolean
34
35 /** 开启长按图片显示识别小程序码菜单
36 * @default false
37 * @supported weapp
38 */
39 showMenuByLongpress?: boolean
40
41 /** 当错误发生时，发布到 AppService 的事件名，事件对象
42 * @supported weapp, h5, rn, swan, alipay, tt
43 */
44 onError?: CommonEventFunction<ImageProps.onErrorEventDetail>
45
46 /** 当图片载入完毕时，发布到 AppService 的事件名，事件对象
47 * @supported weapp, h5, rn, swan, alipay, tt
48 */
49 onLoad?: CommonEventFunction<ImageProps.onLoadEventDetail>
50
51 /**
52 * 为 img 标签额外增加的属性
53 * @supported h5
54 */
55 imgProps?: ImgHTMLAttributes<HTMLImageElement>
56
57 /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
58 * @supported h5
59 */
60 nativeProps?: Record<string, unknown>
61}
62
63declare namespace ImageProps {
64 /** mode 的合法值 */
65 interface Mode {
66 /** 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 */
67 scaleToFill
68 /** 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 */
69 aspectFit
70 /** 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 */
71 aspectFill
72 /** 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 */
73 widthFix
74 /** 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 */
75 heightFix
76 /** 裁剪模式，不缩放图片，只显示图片的顶部区域 */
77 top
78 /** 裁剪模式，不缩放图片，只显示图片的底部区域 */
79 bottom
80 /** 裁剪模式，不缩放图片，只显示图片的中间区域 */
81 center
82 /** 裁剪模式，不缩放图片，只显示图片的左边区域 */
83 left
84 /** 裁剪模式，不缩放图片，只显示图片的右边区域 */
85 right
86 /** 裁剪模式，不缩放图片，只显示图片的左上边区域 */
87 'top left'
88 /** 裁剪模式，不缩放图片，只显示图片的右上边区域 */
89 'top right'
90 /** 裁剪模式，不缩放图片，只显示图片的左下边区域 */
91 'bottom left'
92 /** 裁剪模式，不缩放图片，只显示图片的右下边区域 */
93 'bottom right'
94 }
95 interface onErrorEventDetail {
96 /** 错误信息 */
97 errMsg: string
98 }
99 interface onLoadEventDetail {
100 /** 图片高度 */
101 height: number | string
102 /** 图片宽度 */
103 width: number | string
104 }
105}
106
107/** 图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式以及云文件ID。
108 *
109 * **Note:** 为实现小程序的 `mode` 特性，在 H5 组件中使用一个 `div` 容器来对内部的 `img` 进行展示区域的裁剪，因此请勿使用元素选择器来重置 `img` 的样式！
110 * @classification media
111 * @supported weapp, h5, rn, swan, alipay, tt
112 * @example_react
113 * ```tsx
114 * export default class PageView extends Component {
115 * constructor() {
116 * super(...arguments)
117 * }
118 *
119 * render() {
120 * return (
121 * <View className='components-page'>
122 * <Image
123 * style='width: 300px;height: 100px;background: #fff;'
124 * src='nerv_logo.png'
125 * />
126 * <Image
127 * style='width: 300px;height: 100px;background: #fff;'
128 * src='https://camo.githubusercontent.com/3e1b76e514b895760055987f164ce6c95935a3aa/687474703a2f2f73746f726167652e333630627579696d672e636f6d2f6d74642f686f6d652f6c6f676f2d3278313531333833373932363730372e706e67'
129 * />
130 * </View>
131 * )
132 * }
133 * }
134 * ```
135 * @example_vue
136 * ```html
137 * <template>
138 * <view class="components-page">
139 * <image
140 * style="width: 300px;height: 100px;background: #fff;"
141 * src="nerv_logo.png"
142 * />
143 * <image
144 * style="width: 300px;height: 100px;background: #fff;"
145 * src="https://camo.githubusercontent.com/3e1b76e514b895760055987f164ce6c95935a3aa/687474703a2f2f73746f726167652e333630627579696d672e636f6d2f6d74642f686f6d652f6c6f676f2d3278313531333833373932363730372e706e67"
146 * />
147 * </view>
148 * </template>
149 * ```
150 * @see https://developers.weixin.qq.com/miniprogram/dev/component/image.html
151 */
152declare const Image: ComponentType<ImageProps>
153
154export { Image, ImageProps }