网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
@Entry
@Component
struct NavigationExample {
build() {
Column() {
Image(‘https://img1.baidu.com/it/u=3954245725,1121943782&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=400’)
}
.height(‘100%’)
.width(‘100%’)
.backgroundColor(‘#F1F3F5’)
}
}
☀️1.1.3 Resource资源
使用资源格式可以跨包/跨模块引入图片，resources文件夹下的图片都可以通过$r或$rawfile资源接口读取到并转换到Resource格式
@Entry
@Component
struct NavigationExample {
build() {
Column() {
Image($r(‘app.media.icon’))
}
.height(‘20%’)
.width(‘20%’)
.backgroundColor(‘#F1F3F5’)
}
}
@Entry
@Component
struct NavigationExample {
build() {
Column() {
Image($rawfile(‘1702344909275.jpg’))
}
.height(‘100%’)
.width(‘100%’)
.backgroundColor(‘#F1F3F5’)
}
}
☀️1.1.4 媒体库
支持file://路径前缀的字符串，用于访问通过媒体库提供的图片路径。
1、调用接口获取图库的照片url
import picker from ‘@ohos.file.picker’;
@Entry
@Component
struct Index {
@State imgDatas: string[] = [];
// 获取照片url集
getAllImg() {
let result = new Array();
try {
let PhotoSelectOptions = new picker.PhotoSelectOptions();
PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
PhotoSelectOptions.maxSelectNumber = 5;
let photoPicker = new picker.PhotoViewPicker();
photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult) => {
this.imgDatas = PhotoSelectResult.photoUris;
console.info('PhotoViewPicker.select successfully, PhotoSelectResult uri: ’ + JSON.stringify(PhotoSelectResult));
}).catch((err) => {
console.error(PhotoViewPicker.select failed with. Code: ${err.code}, message: ${err.message});
});
} catch (err) {
console.error(PhotoViewPicker failed with. Code: ${err.code}, message: ${err.message}); }
}
// aboutToAppear中调用上述函数，获取图库的所有图片url，存在imgDatas中
async aboutToAppear() {
this.getAllImg();
}
// 使用imgDatas的url加载图片。
build() {
Column() {
Grid() {
ForEach(this.imgDatas, item => {
GridItem() {
Image(item)
.width(200)
}
}, item => JSON.stringify(item))
}
}.width(‘100%’).height(‘100%’)
}
}
2、从媒体库获取的url格式通常如下
Image(‘file://media/Photos/5’)
.width(200)
☀️1.1.5 base64
路径格式为data:image/[png|jpeg|bmp|webp];base64,[base64 data]，其中[base64 data]为Base64字符串数据。
图片转换地址：https://c.runoob.com/front-end/59/
代码太长就不展示了，图片如下：
🦋1.2 多媒体像素图
import http from ‘@ohos.net.http’;
import ResponseCode from ‘@ohos.net.http’;
import image from ‘@ohos.multimedia.image’;
@Entry
@Component
struct NavigationExample {
@State image: PixelMap = undefined;
build() {
Column() {
Button(“获取网络图片”)
.onClick(() => {
http.createHttp().request(“https://img1.baidu.com/it/u=3954245725,1121943782&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=400”,
(error, data) => {
if (error){
console.error(http reqeust failed with. Code: ${error.code}, message: ${error.message});
} else {
let code = data.responseCode;
if (ResponseCode.ResponseCode.OK === code) {
let res: any = data.result
let imageSource = image.createImageSource(res);
let options = {
alphaType: 0, // 透明度
editable: false, // 是否可编辑
pixelFormat: 3, // 像素格式
scaleMode: 1, // 缩略值
size: { height: 100, width: 100}
} // 创建图片大小
imageSource.createPixelMap(options).then((pixelMap) => {
console.log(‘进不来’)
this.image = pixelMap
})
}
}
}
)
})
Image(this.image)
}
.height(‘100%’)
.width(‘100%’)
.backgroundColor(‘#F1F3F5’)
}
}
2.显示矢量图
Image组件支持显示矢量图（svg格式的图片），并且支持以下标签：svg、rect、circle、ellipse、path、line、polyline、polygon和animate。如果你想改变图片的绘制颜色，可以使用fillColor属性。
Image($r(‘app.media.cloud’)).width(50)
.fillColor(Color.Blue)
3.添加属性
🦋3.1 设置图片缩放类型
| 缩放类型 | 描述 |
|---|---|
| Contain | 图片按比例缩放以适应容器边界，可能会出现空白区域 |
| Cover | 图片按比例缩放以填充容器，可能会被裁剪 |
| Auto | 默认值，图片大小保持原始大小 |
| Fill | 图片拉伸以填充容器，可能会出现失真 |
| ScaleDown | 图片按比例缩小以适应容器边界，但是不会放大图片 |
| None | 不进行任何缩放操作，即使图片溢出容器也不会被裁剪或缩放 |
@Entry
@Component
struct MyComponent {
scroller: Scroller = new Scroller()
build() {
Scroll(this.scroller) {
Column(){
Row() {
Image(
r
(
′
a
p
p
.
m
e
d
i
a
.
i
m
g
2
′
)
)
.
w
i
d
t
h
(
200
)
.
h
e
i
g
h
t
(
150
)
.
b
o
r
d
e
r
(
w
i
d
t
h
:
1
)
.
o
b
j
e
c
t
F
i
t
(
I
m
a
g
e
F
i
t
.
C
o
n
t
a
i
n
)
.
m
a
r
g
i
n
(
15
)
/
/
保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
.
o
v
e
r
l
a
y
(
′
C
o
n
t
a
i
n
′
,
a
l
i
g
n
:
A
l
i
g
n
m
e
n
t
.
B
o
t
t
o
m
,
o
f
f
s
e
t
:
x
:
0
,
y
:
20
)
I
m
a
g
e
(
r('app.media.img_2')).width(200).height(150) .border({ width: 1 }) .objectFit(ImageFit.Contain).margin(15) // 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。 .overlay('Contain', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) Image(
r(′app.media.img2′)).width(200).height(150).border(width:1).objectFit(ImageFit.Contain).margin(15)//保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。.overlay(′Contain′,align:Alignment.Bottom,offset:x:0,y:20)Image(r(‘app.media.img_2’)).width(200).height(150)
.border({ width: 1 })
.objectFit(ImageFit.Cover).margin(15)
// 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
.overlay(‘Cover’, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
Image(KaTeX parse error: Expected 'EOF', got '}' at position 186: … 0, y: 20 } }) }̲ Row() { Image(r(‘app.media.img_2’)).width(200).height(150)
.border({ width: 1 })
.objectFit(ImageFit.Fill).margin(15)
// 不保持宽高比进行放大缩小，使得图片充满显示边界。
.overlay(‘Fill’, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
Image(
r
(
′
a
p
p
.
m
e
d
i
a
.
i
m
g
2
′
)
)
.
w
i
d
t
h
(
200
)
.
h
e
i
g
h
t
(
150
)
.
b
o
r
d
e
r
(
w
i
d
t
h
:
1
)
/
/
保持宽高比显示，图片缩小或者保持不变。
.
o
b
j
e
c
t
F
i
t
(
I
m
a
g
e
F
i
t
.
S
c
a
l
e
D
o
w
n
)
.
m
a
r
g
i
n
(
15
)
.
o
v
e
r
l
a
y
(
′
S
c
a
l
e
D
o
w
n
′
,
a
l
i
g
n
:
A
l
i
g
n
m
e
n
t
.
B
o
t
t
o
m
,
o
f
f
s
e
t
:
x
:
0
,
y
:
20
)
I
m
a
g
e
(
r('app.media.img_2')).width(200).height(150) .border({ width: 1 }) // 保持宽高比显示，图片缩小或者保持不变。 .objectFit(ImageFit.ScaleDown).margin(15) .overlay('ScaleDown', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) Image(
r(′app.media.img2′)).width(200).height(150).border(width:1)//保持宽高比显示，图片缩小或者保持不变。.objectFit(ImageFit.ScaleDown).margin(15).overlay(′ScaleDown′,align:Alignment.Bottom,offset:x:0,y:20)Image(r(‘app.media.img_2’)).width(200).height(150)
.border({ width: 1 })
// 保持原有尺寸显示。
.objectFit(ImageFit.None).margin(15)
.overlay(‘None’, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
}
}
}
}
}
🦋3.2 图片插值
图片插值（Image interpolation）是指通过计算和处理像素点之间的值，生成一个新的像素值并插入到图像中的过程。插值通常用于调整图像的大小，例如将图像从低分辨率放大到高分辨率或从高分辨率缩小到低分辨率。通过插值算法，可以在不失真或失真最小的情况下调整图像大小。常用的插值算法包括双线性插值、双三次插值等。
HarmonyOS可以使用interpolation属性对图片进行插值，使图片显示得更清晰。
@Entry
@Component
struct Index {
build() {
Column() {
Row() {
Image(
r
(
′
a
p
p
.
m
e
d
i
a
.
i
m
g
2
′
)
)
.
w
i
d
t
h
(
′
40.
i
n
t
e
r
p
o
l
a
t
i
o
n
(
I
m
a
g
e
I
n
t
e
r
p
o
l
a
t
i
o
n
.
N
o
n
e
)
.
b
o
r
d
e
r
W
i
d
t
h
(
1
)
.
o
v
e
r
l
a
y
(
"
I
n
t
e
r
p
o
l
a
t
i
o
n
.
N
o
n
e
"
,
a
l
i
g
n
:
A
l
i
g
n
m
e
n
t
.
B
o
t
t
o
m
,
o
f
f
s
e
t
:
x
:
0
,
y
:
20
)
.
m
a
r
g
i
n
(
10
)
I
m
a
g
e
(
r('app.media.img_2')) .width('40%') .interpolation(ImageInterpolation.None) .borderWidth(1) .overlay("Interpolation.None", { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) .margin(10) Image(
r(′app.media.img2′)).width(′40.interpolation(ImageInterpolation.None).borderWidth(1).overlay("Interpolation.None",align:Alignment.Bottom,offset:x:0,y:20).margin(10)Image(r(‘app.media.img_2’))
.width(‘40%’)
.interpolation(ImageInterpolation.Low)
.borderWidth(1)
.overlay(“Interpolation.Low”, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
.margin(10)
}.width(‘100%’)
.justifyContent(FlexAlign.Center)
Row() {
Image(
r
(
′
a
p
p
.
m
e
d
i
a
.
i
m
g
2
′
)
)
.
w
i
d
t
h
(
′
40.
i
n
t
e
r
p
o
l
a
t
i
o
n
(
I
m
a
g
e
I
n
t
e
r
p
o
l
a
t
i
o
n
.
M
e
d
i
u
m
)
.
b
o
r
d
e
r
W
i
d
t
h
(
1
)
.
o
v
e
r
l
a
y
(
"
I
n
t
e
r
p
o
l
a
t
i
o
n
.
M
e
d
i
u
m
"
,
a
l
i
g
n
:
A
l
i
g
n
m
e
n
t
.
B
o
t
t
o
m
,
o
f
f
s
e
t
:
x
:
0
,
y
:
20
)
.
m
a
r
g
i
n
(
10
)
I
m
a
g
e
(
r('app.media.img_2')) .width('40%') .interpolation(ImageInterpolation.Medium) .borderWidth(1) .overlay("Interpolation.Medium", { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) .margin(10) Image(
r(′app.media.img2′)).width(′40.interpolation(ImageInterpolation.Medium).borderWidth(1).overlay("Interpolation.Medium",align:Alignment.Bottom,offset:x:0,y:20).margin(10)Image(r(‘app.media.img_2’))
.width(‘40%’)
.interpolation(ImageInterpolation.High)
.borderWidth(1)
.overlay(“Interpolation.High”, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
.margin(10)
}.width(‘100%’)
.justifyContent(FlexAlign.Center)
}
.height(‘100%’)
}
}
🦋3.3 设置图片重复样式
@Entry
@Component
struct MyComponent {
build() {
Column({ space: 10 }) {
Row({ space: 5 }) {
Image(
r
(
′
a
p
p
.
m
e
d
i
a
.
i
c
o
n
′
)
)
.
w
i
d
t
h
(
110
)
.
h
e
i
g
h
t
(
115
)
.
b
o
r
d
e
r
(
w
i
d
t
h
:
1
)
.
o
b
j
e
c
t
R
e
p
e
a
t
(
I
m
a
g
e
R
e
p
e
a
t
.
X
Y
)
.
o
b
j
e
c
t
F
i
t
(
I
m
a
g
e
F
i
t
.
S
c
a
l
e
D
o
w
n
)
/
/
在水平轴和竖直轴上同时重复绘制图片
.
o
v
e
r
l
a
y
(
′
I
m
a
g
e
R
e
p
e
a
t
.
X
Y
′
,
a
l
i
g
n
:
A
l
i
g
n
m
e
n
t
.
B
o
t
t
o
m
,
o
f
f
s
e
t
:
x
:
0
,
y
:
20
)
I
m
a
g
e
(
r('app.media.icon')) .width(110) .height(115) .border({ width: 1 }) .objectRepeat(ImageRepeat.XY) .objectFit(ImageFit.ScaleDown) // 在水平轴和竖直轴上同时重复绘制图片 .overlay('ImageRepeat.XY', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) Image(
r(′app.media.icon′)).width(110).height(115).border(width:1).objectRepeat(ImageRepeat.XY).objectFit(ImageFit.ScaleDown)//在水平轴和竖直轴上同时重复绘制图片.overlay(′ImageRepeat.XY′,align:Alignment.Bottom,offset:x:0,y:20)Image(r(‘app.media.icon’))
.width(110)
.height(115)
.border({ width: 1 })
.objectRepeat(ImageRepeat.Y)
.objectFit(ImageFit.ScaleDown)
// 只在竖直轴上重复绘制图片
.overlay(‘ImageRepeat.Y’, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
Image($r(‘app.media.icon’))
.width(110)
.height(115)
.border({ width: 1 })
.objectRepeat(ImageRepeat.X)
.objectFit(ImageFit.ScaleDown)
// 只在水平轴上重复绘制图片
.overlay(‘ImageRepeat.X’, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
}
}.height(150).width(‘100%’).padding(8)
}
}
🦋3.4 设置图片渲染模式
通过renderMode属性设置图片的渲染模式为原色或黑白。
@Entry
@Component
struct MyComponent {
build() {
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
置图片的渲染模式为原色或黑白。
@Entry
@Component
struct MyComponent {
build() {
[外链图片转存中…(img-hUWiMX4k-1715172874174)]
[外链图片转存中…(img-dsa3bY7U-1715172874175)]
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
