微信小程序 image 图片组件

梦里梦外; 2021-09-08 06:22 570阅读 0赞

[完整**微信小程序(Java后端) 技术贴**目录清单页面（必看）][Java_]

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，[2.3.0][] 起支持云文件ID。

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">src</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">图片资源地址</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">mode</td> 
   <td align="left">string</td> 
   <td align="left">scaleToFill</td> 
   <td align="left">否</td> 
   <td align="left">图片裁剪、缩放的模式</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">webp</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">默认不解析 webP 格式，只支持网络资源</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.9.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">lazy-load</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">图片懒加载，在即将进入一定范围（上下三屏）时才开始加载</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.5.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">show-menu-by-longpress</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">开启长按图片显示识别小程序码菜单</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.7.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">binderror</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">当错误发生时触发，event.detail = {errMsg}</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindload</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">当图片载入完毕时触发，event.detail = {height, width}</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
 </tbody> 
</table>

**mode 的合法值**

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">scaleToFill</td> 
   <td align="left">缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">aspectFit</td> 
   <td align="left">缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">aspectFill</td> 
   <td align="left">缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">widthFix</td> 
   <td align="left">缩放模式，宽度不变，高度自动变化，保持原图宽高比不变</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">heightFix</td> 
   <td align="left">缩放模式，高度不变，宽度自动变化，保持原图宽高比不变</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.10.3</a></td> 
  </tr> 
  <tr> 
   <td align="left">top</td> 
   <td align="left">裁剪模式，不缩放图片，只显示图片的顶部区域</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">bottom</td> 
   <td align="left">裁剪模式，不缩放图片，只显示图片的底部区域</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">center</td> 
   <td align="left">裁剪模式，不缩放图片，只显示图片的中间区域</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">left</td> 
   <td align="left">裁剪模式，不缩放图片，只显示图片的左边区域</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">right</td> 
   <td align="left">裁剪模式，不缩放图片，只显示图片的右边区域</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">top left</td> 
   <td align="left">裁剪模式，不缩放图片，只显示图片的左上边区域</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">top right</td> 
   <td align="left">裁剪模式，不缩放图片，只显示图片的右上边区域</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">bottom left</td> 
   <td align="left">裁剪模式，不缩放图片，只显示图片的左下边区域</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">bottom right</td> 
   <td align="left">裁剪模式，不缩放图片，只显示图片的右下边区域</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

**Bug & Tip**

1.  `tip`：image组件默认宽度320px、高度240px
2.  `tip`：image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别

**示例代码**

[在开发者工具中预览效果][Link 1]

**原图**

![image][]

index.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-items="{ {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>

index.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: '../resources/cat.jpg'
      },
      imageError: function (e) { 
        console.log('image3发生error事件，携带值为', e.detail.errMsg)
      }
    })

运行效果：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EdbS3EjJ-1623154052649)(image-20210608113558514.png)\]][img-EdbS3EjJ-1623154052649_image-20210608113558514.png]

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[2.3.0]: https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html
[Link 1]: https://developers.weixin.qq.com/s/3Kcaatmc7Z5s
[image]: /images/20210716/3f3dc60a9c46459c8892eb586434702f.png
[img-EdbS3EjJ-1623154052649_image-20210608113558514.png]: /images/20210716/edce56ebb58a4f4c86b8583ab13b7d67.png