小菜在之前简单搭建了一个【登录】页面，其中用到了 Image 图片组件，小菜今天简单学习一下常用的 Image 组件；
Image
Image 继承自 Component 基础组件类，与 Android 类似；小菜优先学习一下几个常见的重要属性；
1. image_src 图片资源
Image 通过 image_src 来引入本地图片资源，与 Android 类似，很容易理解；
<Image
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$color:color_btn_start"
ohos:image_src="$media:icon_hzw01"
ohos:layout_alignment="center"
ohos:margin="10vp"/>
2. alpha 透明度
Image 通过 alpha 设置图片透明度，其中需要注意的是，透明度影响的是整个 Image 组件，包括图片背景效果；
<Image
ohos:height="match_content"
ohos:width="match_content"
ohos:alpha="0.5"
ohos:background_element="$color:color_btn_start"
ohos:image_src="$media:icon_hzw01"
ohos:layout_alignment="center"
ohos:margin="10vp"/>
3. scale_x & scale_y 水平 & 垂直缩放比例
scale_x 和 scale_y 分别对应水平方向和垂直方向图片的缩放比例，当设置缩放时，只是图片展示效果缩放，但图片的整体尺寸并未影响；
<Image
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$color:color_btn_start"
ohos:image_src="$media:icon_hzw01"
ohos:layout_alignment="center"
ohos:margin="10vp"
ohos:scale_x="0.5"
ohos:scale_y="0.5"/>
4. scale_mode 填充方式
scale_mode 对应图片的填充方式，当设置宽高属性与原始图片不一致时，为了相同的显示效果，通常设置 scale_mode 图片的填充方式；
- center：以原始图片中心扩展图片，截取展示 Image 设置的宽高尺寸，整个过程图片不会缩放，center 为图片的默认填充方式；
- zoom_start：原始图片按比例缩放到 Image 设置的最小的宽或高尺寸，并以开始方向对齐，大部分情况是从左向右方向，但是阿拉伯语等是从右向左方向；
- zoom_center：原始图片按比例缩放到 Image 设置的最小的宽或高尺寸，并居中对齐；
- zoom_end：原始图片按比例缩放到 Image 设置的最小的宽或高尺寸，并以结束方向对齐；
- clip_center：以原始图片中心缩放图片，直到原始图的最小宽高之一满足 Image 设置的最小宽高之后，整体进行缩放，再进行裁剪；
- inside：以原始图片中心对图片进行缩放，直到原始图的最大宽高满足 Image 设置的最小宽高时，整体进行缩放；
- stretch：以 Image 设置宽高为基础，对原始图片进行水平垂直放心压缩或拉伸，将整个图片存放在设置的 Image 中；
<Image
ohos:height="100vp"
ohos:width="100vp"
ohos:background_element="$color:color_btn_start"
ohos:image_src="$media:icon_hzw02"
ohos:layout_alignment="center"
ohos:margin="10vp"
ohos:scale_mode="center"/>
// 顺序
1. ohos:scale_mode="inside"
2. ohos:scale_mode="center"
3. ohos:scale_mode="zoom_start"
4. ohos:scale_mode="zoom_center"
5. ohos:scale_mode="zoom_end"
6. ohos:scale_mode="clip_center"
7. ohos:scale_mode="stretch"
5. clip_alignment 裁剪方式
clip_alignment 为图片的裁剪方式，多种对齐方式可以共同使用，互相影响；
- center：以图片中心对齐裁剪，默认方式；
- left：以图片居左对齐裁剪；
- right：以图片居右对齐裁剪；
- top：以图片居顶对齐裁剪；
- bottom：以图片居底对齐裁剪；
<Image
ohos:height="150vp"
ohos:width="150vp"
ohos:background_element="$color:color_btn_start"
ohos:clip_alignment="center"
ohos:image_src="$media:icon_hzw02"
ohos:layout_alignment="center"
ohos:margin="10vp"/>
// 顺序
1. ohos:clip_alignment="center"
2. ohos:clip_alignment="top"
3. ohos:clip_alignment="bottom"
4. ohos:clip_alignment="left"
5. ohos:clip_alignment="right"
6. ohos:clip_alignment="bottom|right"
6. clip_direction 裁剪方向
clip_direction 为裁剪方向，Image 提供了两种裁剪方式，默认的 vertical 垂直方向和 horizontal 水平方向；当设置 horizontal 水平方向裁时，只会原始图片水平居中的位置进行裁剪；
<Image
ohos:height="150vp"
ohos:width="150vp"
ohos:background_element="$color:color_btn_start"
ohos:clip_alignment="bottom|right"
ohos:clip_direction="horizontal"
ohos:image_src="$media:icon_hzw02"
ohos:layout_alignment="center"
ohos:margin="10vp"/>
// 顺序
1. ohos:clip_alignment="center"
2. ohos:clip_alignment="top"
3. ohos:clip_alignment="bottom"
4. ohos:clip_alignment="left"
5. ohos:clip_alignment="right"
6. ohos:clip_alignment="bottom|right"
小菜主要学习了 Image 的几个常见的属性，后续会逐渐对 Image 进行深入探索；如有错误，请多多指导！
来源：阿策小和尚
