微信小程序官方组件展示之媒体组件image源码

以下将展示微信小程序之媒体组件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

 

    image

    图片

 

 

   

      {{item.text}}

     

       

     

   

 

原图

版权声明：本站所有内容均由互联网收集整理、上传，如涉及版权问题，请联系我们第一时间处理。

原文链接地址：https://developers.weixin.qq.com/miniprogram/dev/component/image.html