# UImage 图片展示 - [示例](#示例) - [模拟异步展示图片](#模拟异步展示图片) - [异步展示图片报错](#异步展示图片报错) - [适应](#适应) - [适应（图片小于父元素时以原尺寸展示）](#适应图片小于父元素时以原尺寸展示) - [拉伸](#拉伸) - [填充](#填充) - [原尺寸](#原尺寸) - [多个url](#多个url) - [API]() - [Props/Attrs](#propsattrs) - [Events](#events) **Display** 可以用来展示一张图片，支持设置图片地址。 ## 示例 ### 模拟异步展示图片 ```vue ``` ### 异步展示图片报错 ```vue ``` ### 适应 ``` html ``` ### 适应（图片小于父元素时以原尺寸展示） ``` html ``` ### 拉伸 ``` html ``` ### 填充 ``` html ``` ### 原尺寸 ``` html ``` ### 多个url ``` html ``` ## API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | convertSrcFn | Function | | `'(src) =\> { try { const tempSrc = JSON.parse(src); const tempItem = tempSrc\[0\]; return tempItem.url; } catch (e) { return src;}}'` | 将传入的src转换为符合要求的字符串 | | src | image | | `''` | | | fit | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'contain'` | | | circle | boolean | | `false` | | | horizontalCenter | string | `'左对齐'` ()
`'居中对齐'` ()
`'右对齐'` () | `'center'` | | | verticalCenter | string | `'顶部对齐'` ()
`'居中对齐'` ()
`'底部对齐'` () | `'center'` | | | preview | boolean | | `false` | 是否支持点击放大全屏展示 | | loading-type | string | `[object Object]`
`[object Object]`
`[object Object]` | `'loading'` | undefined | | placeholder-src | string | | `'https://static-vusion.nos-eastchina1.126.net/h5-template/lietu.png'` | undefined | ### Events #### @load 网页加载完成时触发 | Param | Type | Description | | ----- | ---- | ----------- | #### @click 在元素上按下并释放任意鼠标按钮时触发。 #### @dblclick 在元素上双击鼠标按钮时触发。 #### @contextmenu 在右键菜单显示前触发。 #### @mousedown 在元素上按下任意鼠标按钮时触发。 #### @mouseup 在元素上释放任意鼠标按钮时触发。 #### @mouseenter 鼠标移入元素时触发。 #### @mouseleave 鼠标移出元素时触发。