ArkTS-ArkUI组件-Image组件

image这是官方文档可以参考学习。  Image:图片显示组件

ArkTs API参考文档，写的非常好，非常适合中国人的体质！！！！！！

在编写代码途中遇到不会的组件也没关系，DevEco Studio功能十分强大，直接将鼠标放在你想要了解的组件上，在弹出的窗体中点击 Show in API Reference即可查看与官网一模一样的文档。

声明Iamge组件并设置图片源：

                                         Image(src: string | PixelMap | Resource) 

 String格式通常用来加载网络图片。

  使用网络图片时，需要申请权限ohos.permission.INTERNET。不加权限网络图片加载不出来哦！

Image("https://www.example.com/xxx.png")

     // 直接加载网络地址，请填写一个具体的网络图片地址

 在module.json5文件中申明网络访问权限

 

 PixelMap格式常加载像素图片，常在图片中编辑。

使用像素来操作图片，仅仅只是展示不建议使用。

Image（PixelMapObject）

 Resource格式用来加载本地图片

这里又可以分为两类.因为图片存放的位置不一样

1. Image($r('app.media.icon'))————》 media文件下  **：不需要加图片格式

        2.Image($rawfile('icon.png')) ————》rawfile文件下   **：一定要加图片格式

一定要按照上面的标准来写否则就会报错！！！！！ 

Image的属性 

 这里介绍几个相对来说比较常用的属性：

interpolation（ImageInterpolation.None）

设置图片的插值效果，即减轻低清晰度图片在放大显示时出现的锯齿问题。 

名称	描述
None	不使用图片插值。（ImageInterpolation.None为默认值）
High	高图片插值，插值质量最高，可能会影响图片渲染的速度。
Medium	中图片插值。
Low	低图片插值。

width（xx）/width（'xx%'）

height一样

想调整图片大小可以只控制一个宽/高，另一个会自动调整啦! 

参数名	类型	说明
width	number	图片的宽。 单位：像素
height	number	图片的高。 单位：像素

图片摆对位置才能锦上添花，最后再来介绍个margin吧

margin(xx)————》这种是四周的间距都为xx

 如果只想指定一边的间距呢？？？

margin（{top: xx}）————》距顶部xx

其他三边都是一样的写法哦！！ 

代码汇总

Image($r('app.media.logo'))        //插入谓语media文件下的图片
    .width(250)                    //宽为250vp(像素)
    .margin(50)                   //四周间距都为50
    .interpolation(ImageInterpolation.High)     //高插值--》清晰度

Image组件的基本用法就结束啦，快去试试吧！！ 

非余总语录 

                                眼看千遍不如手过一遍！！

代码一定要动手去敲才能记得牢哦！！！！！！