六.微信小程序媒体组件image

朴灿烈づ我的快乐病毒、 2023-07-03 06:03 28阅读 0赞

# 微信小程序媒体组件 image #

图片标签, image组件默认宽度320px, 高度240px.

**注意: 该标签其实是web中的图片标签 和 背景标签的结合. 并且不支持以前的web中的背景图片的写法**

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>src</td> 
   <td>String</td> 
   <td></td> 
   <td>图片资源地址</td> 
  </tr> 
  <tr> 
   <td>mode</td> 
   <td>String</td> 
   <td>‘scaleToFill’</td> 
   <td>图片裁剪、缩放的模式</td> 
  </tr> 
  <tr> 
   <td>binderror</td> 
   <td>HandleEvent</td> 
   <td></td> 
   <td>当错误发生时, 发布到AppService的事件名, 事件对象event.detail = {errMsg:‘something wrong’}</td> 
  </tr> 
  <tr> 
   <td>bindload</td> 
   <td>HandleEvent</td> 
   <td></td> 
   <td>当图片载入完成时, 发布到AppService的事件名, 事件对象event.detail = {height:‘图片高度pa’, width:‘图片宽度px’}</td> 
  </tr> 
 </tbody> 
</table>

**mode 有效值**

mode有13种模式, 其中4中是缩放模式, 9中是裁剪模式.

<table> 
 <thead> 
  <tr> 
   <th>模式</th> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>缩放</td> 
   <td>scaleToFill</td> 
   <td>不保持纵横比例缩放图片, 使图片的宽高完全拉伸至填满image元素</td> 
  </tr> 
  <tr> 
   <td>缩放</td> 
   <td>aspectFit</td> 
   <td>保持纵横比例缩放图片, 使图片的长边能完全显示出来. 也就是说, 可以完整地将图片显示出来.</td> 
  </tr> 
  <tr> 
   <td>缩放</td> 
   <td>aspectFill</td> 
   <td>保持纵横比缩放图片, 只要保持图片的短边能完全显示出来. 也就是说, 图片通常只在水平或垂直方向是完整地, 另一个方向将会发生截取.</td> 
  </tr> 
  <tr> 
   <td>缩放</td> 
   <td>widthFix</td> 
   <td>宽度不变, 高度自动变化, 保持原图宽高比不变</td> 
  </tr> 
  <tr> 
   <td>裁剪</td> 
   <td>top</td> 
   <td>不缩放图片, 只显示图片的顶部区域</td> 
  </tr> 
  <tr> 
   <td>裁剪</td> 
   <td>bottom</td> 
   <td>不缩放图片, 只显示图片的底部区域</td> 
  </tr> 
  <tr> 
   <td>裁剪</td> 
   <td>center</td> 
   <td>不缩放图片, 只显示图片的中间区域</td> 
  </tr> 
  <tr> 
   <td>裁剪</td> 
   <td>left</td> 
   <td>不缩放图片, 只显示图片左边的区域</td> 
  </tr> 
  <tr> 
   <td>裁剪</td> 
   <td>right</td> 
   <td>不缩放图片, 只显示图片右边的区域</td> 
  </tr> 
  <tr> 
   <td>裁剪</td> 
   <td>top left</td> 
   <td>不缩放图片, 只显示图片左上的区域</td> 
  </tr> 
  <tr> 
   <td>裁剪</td> 
   <td>top right</td> 
   <td>不缩放图片, 只显示图片右上的区域</td> 
  </tr> 
  <tr> 
   <td>裁剪</td> 
   <td>bottom left</td> 
   <td>不缩放图片, 只显示图片左下的区域</td> 
  </tr> 
  <tr> 
   <td>裁剪</td> 
   <td>bottom right</td> 
   <td>不缩放图片, 只显示图片右下的区域</td> 
  </tr> 
 </tbody> 
</table>