HarmonyOS 鸿蒙Next Image加载webp报错,无法显示

发布于 1周前 作者 wuwangju 最后一次编辑是 5天前 来自 鸿蒙OS

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

2 回复

可以提供一下你的具体的工程代码吗?目前来看是因为权限的问题导致图片加载不成功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格式图片时出现报错且无法显示的问题,通常与以下几个因素有关:

  1. 图片格式支持:确认系统或组件是否已内置对webp格式的支持。HarmonyOS默认支持多种图片格式,但具体支持情况可能因版本而异。

  2. 图片文件损坏:webp文件可能在生成或传输过程中损坏,导致无法正确解析。

  3. 资源路径错误:检查图片资源路径是否正确,确保资源文件已正确放置在项目中且路径无误。

  4. 内存或性能限制:大尺寸或高分辨率的webp图片可能因内存限制而无法加载。

  5. 组件配置:检查Next Image组件的配置是否正确,包括图片加载方式、缓存策略等。

解决步骤包括:

  • 验证webp文件是否完整有效。
  • 检查并修正资源路径。
  • 确认HarmonyOS版本对webp的支持情况,必要时考虑转换图片格式。
  • 优化图片尺寸和分辨率。
  • 复查组件配置,确保无误。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部