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