百度智能小程序 图片

image 图片

解释：图片，支持 JPG、PNG、GIF、BMP、WEBP 等格式。image 组件默认宽度 300px、高度 225px。

属性说明

mode 有效值

有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

示例 

在开发者工具中打开

代码示例 1： 自定义缩放模式

<view class="wrap">
    <view class="card-area" s-for="{{scaleArray}}">
        <image
            class="image-area {{item.hasBackgroud == 1 ? 'backGround': ''}}"
            data-name="{{item.mode}}"
            bindtap="onTap"
            mode="{{item.mode}}"
            src="{{src}}"
            binderror="imageError"
            bindload="imageLoad" />
        <view class="bottom-description">{{item.text}}</view>
    </view>
</view>

Page({
    data: {
        scaleArray: [{
            mode: 'scaleToFill',
            text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
        }, {
            mode: 'aspectFit',
            text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来',
            hasBackgroud: 1
        }, {
            mode: 'aspectFill',
            text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
        }, {
            mode: 'widthFix',
            text: 'widthFix：宽度不变，高度自动变化，保持原图宽高比不变'
        }],
        src: 'https://b.bdstatic.com/miniapp/images/demo-dog.png'
    },
    imageError(e) {
      console.log('image 发生 error 事件，携带值为', e.detail.errMsg);
    },
    onTap(e) {
      console.log('image 发生 tap 事件', e);
    },
    imageLoad(e) {
        console.log('image 加载成功', e.type);
    }
});

代码示例 2： 不缩放图片，自定义裁切模式

<view class="wrap">
    <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>

Page({
    data: {
        cutArray: [{
            mode: 'top',
            text: 'top：不缩放图片，只显示图片的顶部区域'
        }, {
            mode: 'bottom',
            text: 'bottom：不缩放图片，只显示图片的底部区域'
        }, {
            mode: 'center',
            text: 'center：不缩放图片，只显示图片的中间区域'
        }, {
            mode: 'left',
            text: 'left：不缩放图片，只显示图片的左边区域'
        }, {
            mode: 'right',
            text: 'right：不缩放图片，只显示图片的右边边区域'
        }, {
            mode: 'top left',
            text: 'top left：不缩放图片，只显示图片的左上边区域'
        }, {
            mode: 'top right',
            text: 'top right：不缩放图片，只显示图片的右上边区域'
        }, {
            mode: 'bottom left',
            text: 'bottom left：不缩放图片，只显示图片的左下边区域'
        }, {
            mode: 'bottom right',
            text: 'bottom right：不缩放图片，只显示图片的右下边区域'
        }],
        src: 'https://b.bdstatic.com/miniapp/images/demo-dog.png'
    },
    imageError(e) {
        console.log('image 发生 error 事件，携带值为', e.detail.errMsg);
    },
    onTap(e) {
        console.log('image 发生 tap 事件', e);
    },
    imageLoad(e) {
        console.log('image 加载成功', e.type);
    }
});

代码示例 3 - iOS 可支持 webp

<image src='https://b.bdstatic.com/searchbox/icms/searchbox/images/demo.webp' webp/>

Bug & Tip

• Tip：支持设置 CSS background-position 属性，但是不推荐使用，会影响对应 mode 类型的展示。
• Tip：image 组件默认宽度 300px、高度 225px。
• Tip：未显示设置 preview 的图片会进行点击默认预览判断，建议显示设置 preview。
• Tip：点击预览功能 IOS 端目前不支持本地图片预览，可以设置 original-src 为远程图片地
• Tip：webp 属性只针对 iOS 端，支持网络资源的 WEBP 格式的图片。

参考示例

参考示例 1: 可放动图 

在开发者工具中打开

<image src="https://b.bdstatic.com/miniapp/images/radio.gif" rel="external nofollow"  />

错误码

代码示例 3 - iOS 可支持 webp