Image 图片

    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.                     <image src="https://loading.io/spinners/spinner/index.ajax-spinner-preloader.svg" slot="loading" />
    17.                 </wux-image>
    18.             </wux-col>
    19.         </wux-row>
    20.         <view class="sub-title">Loading</view>
    21.         <wux-row>
    22.             <wux-col span="4">
    23.                 <wux-image wux-class="image" src="https://picsum.photos/750/750/?random&s=4" />
    24.             </wux-col>
    25.             <wux-col span="4">
    27.             </wux-col>
    28.             <wux-col span="4">
    29.                 <wux-image wux-class="image" src="https://picsum.photos/750/750/?random&s=6">
    30.                     <image src="https://loading.io/spinners/spinner/index.ajax-spinner-preloader.svg" slot="loading" />
    31.                 </wux-image>
    32.             </wux-col>
    33.         </wux-row>
    34.         <view class="sub-title">Empty</view>
    35.         <wux-row>
    36.             <wux-col span="4">
    37.                 <wux-image wux-class="image" src="" />
    38.             </wux-col>
    39.                 <wux-image wux-class="image" src="" empty="Empty" />
    40.             </wux-col>
    41.             <wux-col span="4">
    42.                 <wux-image wux-class="image" src="">
    43.                     <image src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" slot="empty" />
    44.                 </wux-image>
    45.             </wux-col>
    46.         </wux-row>
    47.         <view class="sub-title">Error</view>
    48.         <wux-row>
    49.             <wux-col span="4">
    50.                 <wux-image wux-class="image" src="error" />
    52.             <wux-col span="4">
    53.                 <wux-image wux-class="image" src="error" error="Error" />
    54.             </wux-col>
    55.             <wux-col span="4">
    56.                 <wux-image wux-class="image" src="error">
    57.                     <image src="https://wux.cdn.cloverstd.com/logo.png" slot="error" />
    58.                 </wux-image>
    59.             </wux-col>
    60.         </wux-row>
    61.     </view>

    Image