<custom chineseName="图片" engName="image"></custom>
<view class="wrap">
    <view class="mode-title mode-title-first">
        <view class="mode-title-line-left"></view>
        <view class="mode-title-text">自定义缩放模式</view>
        <view class="mode-title-line-right"></view>
    </view>
    <view class="card-area" s-for="{{scaleArray}}">
        <image
            class="image-area {{item.hasBackgroud == 1 ? 'back-ground': ''}}"
            data-name="{{item.mode}}"
            bindtap="onTap"
            image-menu-prevent="true"
            mode="{{item.mode}}"
            src="{{src}}"
            binderror="imageError"
            bindload="imageLoad" />
        <view class="bottom-description">{{item.text}}</view>
    </view>
    <view class="mode-title mode-title-first">
        <view class="mode-title-line-left"></view>
        <view class="mode-title-text">不缩放图片，自定义裁切模式</view>
        <view class="mode-title-line-right"></view>
    </view>
    <view class="card-area" s-for="{{cutArray}}">
        <image
            class="image-area"
            data-name="{{item.mode}}"
            bindtap="onTap"
            lazy-load="true"
            image-menu-prevent="true"
            mode="{{item.mode}}"
            src="{{src}}"
            binderror="imageError"
            bindload="imageLoad" />
        <view class="bottom-description">{{item.text}}</view>
    </view>
    <view class="card-area">
        <view class="top-description border-bottom">iOS 可支持 webp</view>
        <image mode="aspectFill"  class="image-custom" src="https://b.bdstatic.com/searchbox/icms/searchbox/images/demo.webp" webp/>
    </view>
    <view class="card-area">
        <view class="top-description border-bottom">可放动图</view>
        <image mode="aspectFill" class="image-custom" src="https://b.bdstatic.com/searchbox/icms/searchbox/img/image-gif.gif" />
    </view>
</view>
