HarmonyOS鸿蒙Next图片下载相关

HarmonyOS鸿蒙Next图片下载相关 需要缓存图片至本地 退出app后不清除本地缓存，进入app后先读本地缓存，若无此图片，再请求网络。

3 回复

预加载网络图片，需要加入缓存

可参考以下demo：

import app, { AppResponse } from '[@system](/user/system).app'
@Entry
@Component
struct Page3 {
  //app.setImageRawDataCacheSize方法需要在由@Entry标记的页面，onPageShow或aboutToAppear里面设置才生效
  onPageShow() {
    // 设置解码前图片数据内存缓存上限为100MB (100MB=100*1024*1024B=104857600B)
    app.setImageRawDataCacheSize(104857600)
    console.info('Application onPageShow')
  }
  onDestroy() {
    console.info('Application onDestroy')
  }
  @State alt:Resource = $r('app.media.foreground')
  build() {
    Row() {
      Column() {
        Image($r(''))
          .onError(()=>{
            console.log('demoTest')
            this.alt = $r('app.media.icon')
          })
          .alt(this.alt)
          .width(100)
          .height(100)
      }
    }
  }
}

其中Image($r(’’))假设是网络图片

目前的Image组件加载网络图片第一次会读取网络图片，后续在加载图片会从缓存中读取。

Image组件加载网络图片时会生成本地缓存，Image组件首次加载网络图片时，需要请求网络资源，非首次加载时，默认从缓存中直接读取图片，更多图片缓存设置请参考setImageCacheCount、setImageRawDataCacheSize、setImageFileCacheSize，

请参考： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-graphics-display-V5#存储图片类数据源

请参考： https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-system-app-V5#setimagecachecount7

ImageKnife专门为OpenHarmony打造的一款图像加载缓存库，支持内存缓存和磁盘缓存，支持用户配置参数使用:( 例如：配置是否开启一级内存缓存，配置磁盘缓存策略，配置仅使用缓存加载数据，配置图片变换效果，配置占位图，配置加载失败占位图等)，

请参考： https://gitee.com/openharmony-tpc/ImageKnife

若想用磁盘缓存，建议用上面那个三方库ImageKnife。

这个三方库暂时不支持动图变换效果。

有动图就用原生的组件。

Image的缓存策略：Image模块提供了三级Cache机制，解码后内存图片缓存、解码前数据缓存、物理磁盘缓存。在加载图片时会逐级查找，如果在cache中找到之前加载过的图片则提前返回对应的结果。

1.内存图片缓存： 通过@system.app的setImageCacheCount接口打开缓存

2.磁盘缓存： 磁盘缓存是默认开启的，默认值为100M，可以通过setImageFileCacheSize设置缓存大小，

3.解码前数据缓存：setImageRawDataCacheSize,设置内存中缓存解码前图片数据的大小上限，单位为字节，提升再次加载同源图片的加载速度。如果不设置则默认为0，不进行缓存。

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


HarmonyOS鸿蒙Next中图片下载可以通过使用HttpURLConnection或HttpClient进行网络请求，获取图片数据后，使用ImageSource进行图片的加载和显示。具体步骤包括：创建网络请求连接，获取图片数据流，将数据流转换为ImageSource对象，最后通过Image控件显示图片。代码示例如下：

import http from '@ohos.net.http';
import image from '@ohos.multimedia.image';

let httpRequest = http.createHttp();
httpRequest.request('https://example.com/image.png', (err, data) => {
    if (!err) {
        let imageSource = image.createImageSource(data.result);
        imageSource.createPixelMap().then(pixelMap => {
            // 使用pixelMap显示图片
        });
    }
});

此代码展示了如何通过HTTP请求下载图片并将其显示在鸿蒙应用中。

在HarmonyOS鸿蒙Next中，图片下载可以通过HttpURLConnection或OkHttp等网络请求库实现。首先，获取图片的URL地址，然后通过异步任务（如AsyncTask或HandlerThread）进行下载。下载完成后，将图片数据转换为Bitmap对象，并显示在ImageView中。建议使用缓存机制（如LruCache）优化性能，避免重复下载。

回到顶部