Image 图片

图片。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "Image",
  3.     "usingComponents": {
  4.         "wux-row": "../../dist/row/index",
  5.         "wux-col": "../../dist/col/index",
  6.         "wux-image": "../../dist/image/index"
  7.     }
  8. }

示例

  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">Image</view>
  4.         <view class="page__desc">图片</view>
  5.     </view>
  6.     <view class="page__bd">
  7.         <view class="sub-title">Shape</view>
  8.         <wux-row>
  9.             <wux-col span="4">
  10.                 <wux-image wux-class="image" shape="rounded" src="https://picsum.photos/750/750/?random&s=1" />
  11.             </wux-col>
  12.             <wux-col span="4">
  13.                 <wux-image wux-class="image" shape="circle" src="https://picsum.photos/750/750/?random&s=2" loading="Loading" />
  14.             </wux-col>
  15.             <wux-col span="4">
  16.                 <wux-image wux-class="image" shape="thumbnail" src="https://picsum.photos/750/750/?random&s=3">
  17.                     <image src="https://loading.io/spinners/spinner/index.ajax-spinner-preloader.svg" slot="loading" />
  18.                 </wux-image>
  19.             </wux-col>
  20.         </wux-row>
  21.         <view class="sub-title">Loading</view>
  22.         <wux-row>
  23.             <wux-col span="4">
  24.                 <wux-image wux-class="image" src="https://picsum.photos/750/750/?random&s=4" />
  25.             </wux-col>
  26.             <wux-col span="4">
  27.                 <wux-image wux-class="image" src="https://picsum.photos/750/750/?random&s=5" loading="Loading" />
  28.             </wux-col>
  29.             <wux-col span="4">
  30.                 <wux-image wux-class="image" src="https://picsum.photos/750/750/?random&s=6">
  31.                     <image src="https://loading.io/spinners/spinner/index.ajax-spinner-preloader.svg" slot="loading" />
  32.                 </wux-image>
  33.             </wux-col>
  34.         </wux-row>
  35.         <view class="sub-title">Empty</view>
  36.         <wux-row>
  37.             <wux-col span="4">
  38.                 <wux-image wux-class="image" src="" />
  39.             </wux-col>
  40.             <wux-col span="4">
  41.                 <wux-image wux-class="image" src="" empty="Empty" />
  42.             </wux-col>
  43.             <wux-col span="4">
  44.                 <wux-image wux-class="image" src="">
  45.                     <image src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" slot="empty" />
  46.                 </wux-image>
  47.             </wux-col>
  48.         </wux-row>
  49.         <view class="sub-title">Error</view>
  50.         <wux-row>
  51.             <wux-col span="4">
  52.                 <wux-image wux-class="image" src="error" />
  53.             </wux-col>
  54.             <wux-col span="4">
  55.                 <wux-image wux-class="image" src="error" error="Error" />
  56.             </wux-col>
  57.             <wux-col span="4">
  58.                 <wux-image wux-class="image" src="error">
  59.                     <image src="https://wux.cdn.cloverstd.com/logo.png" slot="error" />
  60.                 </wux-image>
  61.             </wux-col>
  62.         </wux-row>
  63.     </view>
  64. </view>

视频演示

Image

API

Image props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-image
src string 图片资源地址 -
mode string 图片裁剪、缩放的模式，可参考 image scaleToFill
lazyLoad boolean 图片懒加载。只针对 page 与 scroll-view 下的 image 有效 false
shape string 形状，可选值为 normal、rounded、circle、thumbnail normal
width any 默认宽度，单位 px 300
height any 默认高度，单位 px 225
unmountOnEmpty boolean 资源不存在时是否卸载组件 false
unmountOnError boolean 资源加载失败时是否卸载组件 false
empty string 资源不存在的提示内容 -
loading string 资源加载中的提示内容 -
error string 资源加载失败的提示内容 -
bind:change function 监听状态变化的回调函数 -
bind:load function 资源加载完成时的回调函数 -
bind:error function 资源加载失败时的回调函数 -
bind:click function 点击事件 -

Image slot

名称 描述
- 自定义内容
empty 自定义资源不存在的提示内容
loading 自定义资源加载中的提示内容
error 自定义资源加载失败的提示内容

Image externalClasses

名称 描述
wux-class 根节点样式类