HarmonyOS 鸿蒙Next Image加载webp报错,无法显示
HarmonyOS 鸿蒙Next Image加载webp报错,无法显示
模拟器通过PhotoPickerComponent从相册选择图片,然后通过下面的方式加载时报错,日志如下: Image(‘file://media/Photo/17/IMG_1735268301_016/001.webp’)
[(100000:100000:scope)] open file file://media/Photo/17/IMG_1735268301_016/001.webp fail. [(100000:100000:scope)] Image LoadFail, source = <private>, reason: Failed to load image data
加载 jpg 格式的没有问题
Image(‘file://media/Photo/16/IMG_1735268301_015/002.jpg’)
更多关于HarmonyOS 鸿蒙Next Image加载webp报错,无法显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
可以提供一下你的具体的工程代码吗?目前来看是因为权限的问题导致图片加载不成功source = <private>,image组件是可以加载webp文件的,以下是使用PhotoPicker组件访问图片/视频的教程,可以根据自己的业务需要进行修改,期待你的回复:
import {
PhotoPickerComponent, PickerController, PickerOptions,
DataType, BaseItemInfo, ItemInfo, PhotoBrowserInfo, AnimatorParams,
MaxSelected, ItemType, ClickType, PickerOrientation,
SelectMode, PickerColorMode, ReminderMode, MaxCountType, PhotoBrowserRange
} from '[@ohos](/user/ohos).file.PhotoPickerComponent';
import photoAccessHelper from '[@ohos](/user/ohos).file.photoAccessHelper';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct PickerDemo {
pickerOptions: PickerOptions = new PickerOptions();
[@State](/user/State) pickerController: PickerController = new PickerController();
[@State](/user/State) selectUris: Array<string> = new Array<string>();
[@State](/user/State) currentUri: string = '';
[@State](/user/State) isBrowserShow: boolean = false;
aboutToAppear() {
this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
this.pickerOptions.maxSelectNumber = 5;
this.pickerOptions.isSearchSupported = false;
this.pickerOptions.isPhotoTakingSupported = false;
// 其他属性.....
}
private onSelect(uri: string): void {
// 添加
if (uri) {
this.selectUris.push(uri);
}
}
private onDeselect(uri: string): void {
// 移除
if (uri) {
this.selectUris = this.selectUris.filter((item: string) => {
return item != uri;
})
}
}
private onItemClicked(itemInfo: ItemInfo, clickType: ClickType): boolean {
if (!itemInfo) {
return false;
}
let type: ItemType | undefined = itemInfo.itemType;
let uri: string | undefined = itemInfo.uri;
if (type === ItemType.CAMERA) {
// 点击相机item
return true; // 返回true则拉起系统相机,若应用需要自行处理则返回false。
} else {
if (clickType === ClickType.SELECTED) {
// 应用做自己的业务处理
if (uri) {
this.selectUris.push(uri);
this.pickerOptions.preselectedUris = [...this.selectUris];
}
return true; // 返回true则勾选,否则则不响应勾选。
} else {
if (uri) {
this.selectUris = this.selectUris.filter((item: string) => {
return item != uri;
});
this.pickerOptions.preselectedUris = [...this.selectUris];
}
}
return true;
}
}
private onEnterPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean {
// 进入大图的回调
this.isBrowserShow = true;
return true;
}
private onExitPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean {
// 退出大图的回调
this.isBrowserShow = false;
return true;
}
private onPickerControllerReady(): void {
// 接收到该回调后,便可通过pickerController相关接口向picker发送数据,在此之前不生效。
}
private onPhotoBrowserChanged(browserItemInfo: BaseItemInfo): boolean {
// 大图左右滑动的回调
this.currentUri = browserItemInfo.uri ?? '';
return true;
}
build() {
Flex({
direction: FlexDirection.Column,
justifyContent: FlexAlign.Center,
alignItems: ItemAlign.Center
}) {
PhotoPickerComponent({
pickerOptions: this.pickerOptions,
// onSelect: (uri: string): void => this.onSelect(uri),
// onDeselect: (uri: string): void => this.onDeselect(uri),
onItemClicked: (itemInfo: ItemInfo, clickType: ClickType): boolean => this.onItemClicked(itemInfo, clickType), // 该接口可替代上面两个接口
onEnterPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onEnterPhotoBrowser(photoBrowserInfo),
onExitPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onExitPhotoBrowser(photoBrowserInfo),
onPickerControllerReady: (): void => this.onPickerControllerReady(),
onPhotoBrowserChanged: (browserItemInfo: BaseItemInfo): boolean => this.onPhotoBrowserChanged(browserItemInfo),
pickerController: this.pickerController,
}).height('60%').width('100%')
// 这里模拟应用侧底部的选择栏
if (this.isBrowserShow) {
Row() {
ForEach(this.selectUris, (uri: string) => {
if (uri === this.currentUri) {
Image(uri).height('10%').width('10%').onClick(() => {
}).borderWidth(1).borderColor('red')
} else {
Image(uri).height('10%').width('10%').onClick(() => {
this.pickerController.setData(DataType.SET_SELECTED_URIS, this.selectUris);
this.pickerController.setPhotoBrowserItem(uri, PhotoBrowserRange.ALL);
})
}
}, (uri: string) => JSON.stringify(uri))
}
} else {
Button('预览').width('33%').height('5%').onClick(() => {
if (this.selectUris.length > 0) {
this.pickerController.setPhotoBrowserItem(this.selectUris[0], PhotoBrowserRange.SELECTED_ONLY);
}
})
}
}
}
}
更多关于HarmonyOS 鸿蒙Next Image加载webp报错,无法显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙系统中,Next Image组件加载webp格式图片时出现报错且无法显示的问题,通常与以下几个因素有关:
-
图片格式支持:确认系统或组件是否已内置对webp格式的支持。HarmonyOS默认支持多种图片格式,但具体支持情况可能因版本而异。
-
图片文件损坏:webp文件可能在生成或传输过程中损坏,导致无法正确解析。
-
资源路径错误:检查图片资源路径是否正确,确保资源文件已正确放置在项目中且路径无误。
-
内存或性能限制:大尺寸或高分辨率的webp图片可能因内存限制而无法加载。
-
组件配置:检查Next Image组件的配置是否正确,包括图片加载方式、缓存策略等。
解决步骤包括:
- 验证webp文件是否完整有效。
- 检查并修正资源路径。
- 确认HarmonyOS版本对webp的支持情况,必要时考虑转换图片格式。
- 优化图片尺寸和分辨率。
- 复查组件配置,确保无误。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html