鸿蒙第9篇——Image组件

图片是APP不可缺少的组件，少了它就显得很枯燥。

先看效果图
            

1. 创建 Image组件

使用以下方法创建一个Image组件
Image(src: PixelMap | ResourceStr | DrawableDescriptor)
src 是图片的数据源， 加载时分几种情况：

1. 使用ResourceStr, 包括本地资源、网络资源、Resource资源；
2. 使用PixelMap 加载图片，PixelMap是图片解码后的像素图；
3. 使用 DrawableDescriptor, 为可绘制对象描述符。

2. 示例代码

ImageDemo 的代码对应上述左图

@Entry@Componentstruct ImageDemo{build(){Scroll(){Column(){Text("加载ets/img/目录下图片:").fontSize(20)//1. 加载本地资源 图片资源放在 ets/img 文件夹中Image('img/beatiful.jpg').width("90%").height(250)Text("加载网上图片:").fontSize(20)// 2，加载网络资源 需要先申请权限Image('https://img2.tukuppt.com/photo-big/00/02/84/6188d5d4d70799354.jpg').width(150).aspectRatio(1)// 组件宽高比.margin({top:10,bottom:5})Text("加载resource资源图片:").fontSize(20)Row(){// 3. 加载Resource资源 图片资源放在resources/base/media 文件夹中Image($r('app.media.yiyang_bg')).width(150).height(250).margin({left:5,right:5})// 图片资源放在 resources/rawfile 文件夹中Image($rawfile('fresh_bg.jpg')).width(150).height(250)}.width("100%").height(300)Text("加载gif图片:").fontSize(20)Image($r('app.media.waiting')).width(50).height(50)}.width("100%")}.scrollable(ScrollDirection.Vertical).scrollBar(