HarmonyOS鸿蒙Next图片加载

HarmonyOS鸿蒙Next图片加载 使用Image组件加载一个完整网络路径的图片资源，偶现个别图片加载不出来。目前仅在mate60设备发现此问题，mate60pro和其他mate60设备都未复现此问题，demo见附件。

3 回复 
import { rcp } from '@kit.RemoteCommunicationKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { common } from '@kit.AbilityKit';
import fileUri, {} from '@ohos.file.fileuri'
import { hash } from '@kit.CoreFileKit';
@Entry
@Component
struct ImageWithUrl {
    @State downLoadSuccess: boolean = false
    private url = 'https://newlivefile.51kandianshi.com/live/2023/08/03/f3ccdd27d2000e3f9255a7e3e2c48800_20230803150006A006.jpg'
    aboutToAppear(): void {
    }
    filePath(name: string): string {
        let context = getContext(this) as common.UIAbilityContext
        let filePath = `${context.filesDir}` + '/' + name.split('/').pop()
        return filePath
    }
    build() {
        Column () {
            Image(this.downLoadSuccess ? fileUri.getUriFromPath(this.filePath(this.url)) : this.url)
                .width(140)
                .height(140)
                .onError(() => {
                    let context = getContext(this) as common.UIAbilityContext
                    let filePath = `${context.filesDir}/123.jpg`
                    let downloadToFile = {
                        kind: 'file',
                        file: this.filePath(this.url),
                        keepLocal: false
                    } as rcp.DownloadToFile
                    const session = rcp.createSession();
                    session.downloadToFile(this.url, downloadToFile)
                        .then((response) => {
                            console.info(`DownloadToFile success, the response is ${response}`);
                            this.downLoadSuccess = true
                        })
                        .catch((err: BusinessError) => {
                            console.error(`DownloadToFile failed, the error message is ${err}`);
                        });
                })
        }
    }
}

可以通过onError的回调去判断，具体报错原因是什么，或者可以直接在no filter的日志中过滤aceimage关键字，如果是编解码失败，可咨询图形图像，如果是网络原因可咨询网络管理，如果存在SSL证书问题，建议现将图片下载下来以后，再通过Image加载

SSL证书失败，参考代码：

更多关于HarmonyOS鸿蒙Next图片加载的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，图片加载主要通过Image组件实现。开发者可以使用Image组件加载本地和网络图片。本地图片加载时，直接将图片资源放在resources目录下，通过$r('app.media.image_name')引用。网络图片加载时，使用src属性指定图片URL，如https://example.com/image.png。

鸿蒙Next提供了Image组件的多种属性进行图片显示控制，如clipAlignment、objectFit等。clipAlignment用于设置图片裁剪对齐方式，objectFit用于设置图片填充方式。此外，Image组件支持事件监听，如onComplete和onError，分别用于处理图片加载完成和加载失败的情况。

图片缓存机制在鸿蒙Next中通过ImageCache类实现，开发者可以自定义缓存策略，如设置缓存大小和缓存时间。ImageCache类提供了put、get和remove等方法，用于管理缓存。

图片加载性能优化方面，鸿蒙Next支持图片压缩和懒加载。开发者可以使用Image组件的resize属性进行图片压缩，减少内存占用。懒加载通过LazyForEach组件实现，延迟加载图片，提升页面渲染速度。

鸿蒙Next的图片加载功能还支持多种图片格式，包括JPEG、PNG、GIF和WebP等。开发者可以根据需要选择合适的图片格式，以达到最佳的显示效果和性能。

在HarmonyOS（鸿蒙OS）Next中，图片加载通常通过Image组件实现。使用Image时，可以直接指定本地资源或远程URL。例如：

import { Image } from '@ohos.arkui';

Image($r('app.media.my_image')) // 加载本地资源
  .width(100)
  .height(100);

Image('https://example.com/image.png') // 加载远程图片
  .width(100)
  .height(100);

此外，鸿蒙OS提供了图片缓存机制，可以通过ImageCache类优化加载性能。建议在使用远程图片时，结合缓存机制以减少网络请求和提升用户体验。

回到顶部