以下将展示微信小程序之媒体组件image源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。
功能描述：
图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。
属性说明：
Skyline仅列出与WebView 属性的差异，未列出的属性与 WebView 一致。
Skyline
组件差异
1. 使用 svg 格式且 mode=scaleToFill 时，WebView 会居中（除非 svg 里加上preserveAspectRatio="none"），Skyline 则会撑满
2.svg 格式不支持百分比单位
3.svg 格式不支持
支持长按识别的码
Bug& Tip
1.tip：image组件默认宽度320px、高度240px
2.tip：image组件中二维码/小程序码图片不支持长按识别。仅在 wx.previewImage 中支持长按识别
3.tip：image组件进行缩放时，计算出来的宽高可能带有小数，在不同 webview 内核下渲染可能会被抹去小数部分
示例代码
JAVASCRIPT
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'
},
imageError: function(e) {
console.log('image3发生error事件，携带值为', e.detail.errMsg)
}
})
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" 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}}"></image>
</view>
</view>
</view>
</view>
原图
版权声明：本站所有内容均由互联网收集整理、上传，如涉及版权问题，请联系我们第一时间处理。
原文链接地址：https://developers.weixin.qq.com/miniprogram/dev/component/image.html
