1 学习组件Image的用法
Image是图片组件，用来渲染展示图片。
Image的属性除支持通用属性外，还支持如下属性：
|
名称 |
类型 |
默认值 |
必填 |
描述 |
|
src |
string |
- |
否 |
图片的路径，支持本地和云端路径，图片格式包括png、jpg、bmp、svg和gif。 支持Base64字符串6 。格式为data:image/[png | jpeg | bmp | webp];base64, [base64 data], 其中[base64 data]为Base64字符串数据。 支持dataability://的路径前缀，用于访问通过data ability提供的图片路径，具体路径信息详见Data Ability说明6 。 |
|
alt |
string |
- |
否 |
占位图，当指定图片在加载中时显示。 |
启动DevEco Studio，新建一个项目或者打开之前的项目。这里我们以之前创建的项目Components为例。在项目窗口中右键单击pages目录，新建一个JS Page，取名imagepage
将一张图片复制到 entry > src > main > js > default > common > images 目录下，例如下图所示（可以直接把图片拖拽过来）
在电脑上快速定位到images目录并打开的方法是，右键单击images目录，选择 打开于 > Explorer。
1 创建Image组件
<!-- imagepage.hml -->
<div class="container">
<image src="common/images/bird.jpg"></image>
</div>
/* imagepage.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
2 设置Image样式
Image组件除支持通用样式外，还支持如下属性：
|
名称 |
类型 |
默认值 |
必填 |
描述 |
|
object-fit |
string |
cover |
否 |
设置图片的缩放类型。可选值类型说明请见object-fit 类型说明。（不支持svg格式） |
|
match-text-direction |
boolean |
false |
否 |
图片是否跟随文字方向。（不支持svg格式） |
|
fit-original-size |
boolean |
false |
否 |
image组件在未设置宽高的情况下是否适应图源尺寸（该属性为true时object-fit属性不生效），svg类型图源不支持该属性。 |
|
object-position7 |
string |
0px 0px |
否 |
设置图片在组件内展示的位置。 设置类型有两种： 1. 像素，单位px，示例 15px 15px 代表X轴或者Y轴移动的位置 2. 字符，可选值：
|
object-fit 类型说明
|
类型 |
描述 |
|
cover |
保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，居中显示。 |
|
contain |
保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，居中显示。 |
|
fill |
不保持宽高比进行放大缩小，使得图片填充满显示边界。 |
|
none |
保持原有尺寸进行居中显示。 |
|
scale-down |
保持宽高比居中显示，图片缩小或者保持不变。 |
使用svg图片资源时：
- 建议设置image组件的长宽，否则在父组件的长或宽为无穷大的场景下，svg资源将不会绘制；
- 如果svg描述中未指定相应的长宽，则svg将会填满image组件区域；
- 如果svg描述中指定了相应的长宽，和image组件本身的长宽效果如下：
- 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分；
- 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。
通过设置width、height和object-fit属性定义图片的宽、高和缩放样式。
/* imagepage.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
image {
width: 80%;
height: 500px;
border: 3px dotted red;
border-radius: 30px;
object-fit: contain;
match-text-direction: true;
}
3 显示多张图片
定义for循环展示多张图片，同时定义select选择图片的展示方式。
<!-- imagepage.hml -->
<div class="container">
<list>
<list-item for="{{ url }}">
<image src="{{ $item }}" style="object-fit: {{ fit }};"></image>
</list-item>
</list>
<select @change="setFit">
<option for="{{ fitList }}" value="{{ $item }}">{{ $item }}</option>
</select>
</div>
/* imagepage.css */
.container {
flex-direction: column;
align-items: center;
justify-content: center;
}
list-item {
justify-content: center;
border: 2px solid blue;
}
image {
width: 300px;
height: 220px;
padding: 5px;
margin: 5px;
border: 2px solid orange;
}
select {
font-size: 40px;
width: 300px;
height: 160px;
border: 2px solid red;
margin-bottom: 20px;
}
option {
font-size: 36px;
}
// imagepage.js
export default {
data: {
url: ['common/images/bird.jpg', 'common/images/fish.jpg'],
fit: 'cover',
fitList: ['cover', 'contain', 'fill', 'none', 'scale-down']
},
setFit(e) {
this.fit = e.newValue;
}
}
4 组件Image事件
除支持通用事件外，还支持如下事件：
|
名称 |
参数 |
描述 |
|
complete(Rich) |
{ width：width， height：height } |
图片成功加载时触发该回调，返回成功加载的图源尺寸。 |
|
error(Rich) |
{ width：width， height：height } |
图片加载出现异常时触发该回调，异常时长宽为零。 |
下面来看看加载图片的实例。本实例图片成功加载时触发complete事件，返回加载的图源尺寸。加载失败则触发error事件，打印图片加载失败。
<!-- imagepage.hml -->
<div class="container">
<image src="common/images/bird.jpg" @complete="imageComplete(1)"
@error="imageError(1)"> </image>
<image src="common/images/bird1.jpg" @complete="imageComplete(2)"
@error="imageError(2)"> </image>
</div>
/* imagepage.css */
.container {
flex-direction: column;
align-items: center;
justify-content: center;
}
image {
width: 80%;
height: 200px;
align-items: center;
margin: 5px;
}
// imagepage.js
import prompt from '@system.prompt';
export default {
imageComplete(i, e) {
prompt.showToast({
message: '图片' i '的宽度为' e.width '，图片' i '的高度为' e.height,
duration: 3000
});
},
imageError(i, e) {
setTimeout(() => {
prompt.showToast({
message: '图片加载失败' i,
duration: 3000
});
}, 3000);
}
}
至此，Image组件的基本用法已经介绍完了。
最后，老规矩，敲黑板：多动手，多思考！代码一定要亲自动手敲出来！[呲牙][比心]
,
