图片。支持JPG、PNG、SVG格式。
效果展示
示例代码
WXML
<view class="page">
<view class="page__hd">
<text class="page__title">image</text>
<text class="page__desc">图片</text>
</view>
<view class="page__bd">
<view class="section section_gap">
<view class="section__title"> local image {{bind}}</view>
<view class="section__ctn">
<image src="../../resources/pic.jpg" bindload="bindload" />
</view>
<view class="section__ctn">
<image src="../../resources/arrow.png" />
</view>
</view>
<view class="section section_gap">
<view class="section__title"> internet image</view>
<view class="section__ctn">
<image src="http://img02.tooopen.com/images/20160603/tooopen_sy_164101489754.jpg" width="200" height="130"/>
<image src="https://pas.lightyy.com/images/common/bread-icon-20.png" width="60" height="60"/>
<image src="https://document.lightyy.com/images/logo.svg" width="60" height="60"/>
</view>
</view>
<view class="section section_gap">
<view class="section__title"> error image {{err}}</view>
<view class="section__ctn">
<image src="error url" binderror="imageError"/>
</view>
</view>
</view>
<view class="page__bd">
<view class="section section_gap" wx:for="{{array}}" wx:for-item="item">
<view class="section__title">{{item.text}}</view>
<view class="section__ctn">
<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}" lazy-load></image>
</view>
</view>
</view>
</view>
JS
Page({
data: {
array: [{
mode: 'scaleToFill',
text: 'scaleToFill:不保持纵横比缩放图片,使图片完全适应'
}, {
mode: 'aspectFit',
text: 'aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来'
}, {
mode: 'aspectFill',
text: 'aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来'
}, {
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://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
err: 'err',
bind: 'bind'
},
imageError: function (e) {
console.log('image3发生error事件,携带值为', e.detail.errMsg);
this.setData({
err: 'image3发生error事件,携带值为' + e.detail.errMsg
})
},
bindload: function (e) {
console.log('图片加载完成');
this.setData({
bind: JSON.stringify(e.detail)
})
}
})
WXSS
.section__ctn{
text-align: center;
}
.test {
width: 750rpx;
height: 100rpx;
background: pink;
}
.test1 {
width: 750px;
height: 100px;
background: yellow;
}
.test2 {
width: 375rpx;
height: 100rpx;
background: pink;
}
.test3 {
width: 375px;
height: 100px;
background: yellow;
}
API
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
src | string | 否 | 图片资源地址,不支持相对路径的SVG格式 | |
mode | string | scaleToFill | 否 | 图片裁剪、缩放的模式 |
binderror | eventhandle | 否 | 当错误发生时触发,event.detail = {errMsg} | |
bindload | eventhandle | 否 | 当图片载入完毕时触发,event.detail = {height, width} |
mode 的合法值
值 | 说明 |
---|---|
scaleToFill | 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 |
aspectFit | 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 |
aspectFill | 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 |
widthFix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 |
top | 裁剪模式,不缩放图片,只显示图片的顶部区域 |
bottom | 裁剪模式,不缩放图片,只显示图片的底部区域 |
center | 裁剪模式,不缩放图片,只显示图片的中间区域 |
left | 裁剪模式,不缩放图片,只显示图片的左边区域 |
right | 裁剪模式,不缩放图片,只显示图片的右边区域 |
top left | 裁剪模式,不缩放图片,只显示图片的左上边区域 |
top right | 裁剪模式,不缩放图片,只显示图片的右上边区域 |
bottom left | 裁剪模式,不缩放图片,只显示图片的左下边区域 |
bottom right | 裁剪模式,不缩放图片,只显示图片的右下边区域 |
多平台支持
属性 | 平台支持 |
---|---|
src | 支付宝 |
mode | 支付宝 |
binderror | 支付宝 |
bindload | 支付宝 |
注释:
支付宝支持远程和本地svg图片