如何用源码搭建小程序(微信小程序官方组件展示之媒体组件image源码)

以下将展示微信小程序之媒体组件image源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档功能描述：图片支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。

属性说明：Skyline 仅列出与 WebView 属性的差异，未列出的属性与 WebView 一致。

Skyline组件差异使用 svg 格式且 mode=scaleToFill 时，WebView 会居中（除非 svg 里加上 preserveAspectRatio="none"），Skyline 则会撑满

svg 格式不支持百分比单位svg 格式不支持 element

支持长按识别的码

Bug & Tip1.tip：image组件默认宽度320px、高度240px2.tip：image组件中二维码/小程序码图片不支持长按识别仅在 wx.previewImage 中支持长按识别3.tip：image组件进行缩放时，计算出来的宽高可能带有小数，在不同 webview 内核下渲染可能会被抹去小数部分。

示例代码JAVASCRIPTPage({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

class="page__hd">image图片

"page__bd">

>{{item.text}}

mode="{{item.mode}}"src="{{src}}">原图