鸿蒙5.0版开发：UI框架JS组件-根本组件（image）

往期鸿蒙全套实战文章必看：（附带鸿蒙全栈学习资料）

• 鸿蒙开发焦点知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习门路
  
• 鸿蒙HarmonyOS NEXT开发技能最全学习门路指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）
  

---

image

图片组件，用来渲染展示图片。
   阐明：
  从API Version 8 开始支持。后续版本如有新增内容，则采取上角标单独标志该内容的起始版本。
  子组件

不支持。
属性

除支持通用属性外，还支持如下属性：
名称范例默认值必填形貌srcstring-否图片的路径。
- 支持当地路径，图片格式包罗png, jpg, bmp, svg和gif。
- 支持内存图片读取，scheme格式为memory://。
阐明：
如需体现网络图片，应自行下载后使用内存图片方式革新，克制使用网络URL地点。altstring-否占位图，当指定图片在加载中时体现。样式

除支持通用样式外，还支持如下样式：
名称范例默认值必填形貌object-fitstringcover否设置图片的缩放范例，可选值范例阐明请见object-fit 范例阐明，svg格式不支持。match-text-directionbooleanfalse否图片是否跟漫笔墨方向，svg格式不支持。fit-original-sizebooleanfalse否image组件在未设置宽高的情况下是否顺应图源尺寸，该属性为true时object-fit属性不收效，svg范例图源不支持该属性。表1 object-fit 范例阐明
范例形貌cover保持宽高比举行缩小大概放大，使得图片双方都大于或即是体现界限，居中体现。contain保持宽高比举行缩小大概放大，使得图片完全体如今体现界限内，居中体现。fill不保持宽高比举行放大缩小，使得图片添补满体现界限。none保持原有尺寸举行居中体现。scale-down保持宽高比居中体现，图片缩小大概保持稳固。  阐明： 使用svg图片资源时：
  

• 发起设置image组件的长宽，否则在父组件的长或宽为无穷大的场景下，svg资源将不会绘制。
  
• 如果svg形貌中未指定相应的长宽，则svg将会填满image组件地区。
  
• 如果svg形貌中指定了相应的长宽，和image组件本身的长宽效果如下：
  
  
  
  • 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅体现左上角部分。
    
  • 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分体现空缺。
    
  
  

变乱

名称参数形貌click-点击动作触发该变乱。complete-图片乐成加载时触发该回调。error-图片加载出现非常时触发该回调。示例

1. <!-- xxx.hml -->
2. <stack class="content">
3.     <image src="/common/bg3.jpg" class="img"></image>
4. </stack>

复制代码

1. /* xxx.css */
2. .img{  
3.   object-fit: contain
4. }

复制代码

4*4卡片