Image 使用官方 requestImageUrl 加载 PixelMap 网络图片链接失败,图片无法展示和保存到图库 (HarmonyOS 鸿蒙Next)

Image 使用官方 requestImageUrl 加载 PixelMap 网络图片链接失败,图片无法展示和保存到图库 (HarmonyOS 鸿蒙Next) 文档代码参考地址: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-image-V5#%E7%A4%BA%E4%BE%8B2%E4%B8%8B%E8%BD%BD%E4%B8%8E%E6%98%BE%E7%A4%BA%E7%BD%91%E7%BB%9C%E5%9B%BE%E7%89%87

我们需要加载的图片链接: https://cs-ltb.51ydmw.com/api/user/getMyAuthorization?LOGIN_TOKEN=890351021547:1ce7fefd-c642-4fb5-bf9e-97255e941e2d&caImgSign=0d0c5c5b8320a9ae2126ea3d52a10f8c

官方demo:

import { http } from '@kit.NetworkKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { image } from '@kit.ImageKit';

@Entry
@Component
struct ImageExample2 {
  @State pixelMapImg: PixelMap | undefined = undefined;

  aboutToAppear() {
    let imageUrl = "https://cs-ltb.51ydmw.com/api/user/getMyAuthorization?LOGIN_TOKEN=890351021547:1ce7fefd-c642-4fb5-bf9e-97255e941e2d&caImgSign=0d0c5c5b8320a9ae2126ea3d52a10f8c"
    this.requestImageUrl(imageUrl );// 请填写一个具体的网络图片地址
  }

  requestImageUrl(url: string) {
    http.createHttp().request(url, (error: BusinessError, data: http.HttpResponse) => {
      if (error) {
        console.error(`request image failed: url: ${url}, code: ${error.code}, message: ${error.message}`);
      } else {
        let imgData: ArrayBuffer = data.result as ArrayBuffer;
        console.info(`request image success, size: ${imgData.byteLength}`);
        let imgSource: image.ImageSource = image.createImageSource(imgData);
        class sizeTmp {
          height: number = 100
          width: number = 100
        }
        let options: Record<string, number | boolean | sizeTmp> = {
          'alphaType': 0,
          'editable': false,
          'pixelFormat': 3,
          'scaleMode': 1,
          'size': { height: 100, width: 100 }
        }
        imgSource.createPixelMap(options).then((pixelMap: PixelMap) => {
          console.error('image createPixelMap success');
          this.pixelMapImg = pixelMap;
        })
      }
    })
  }

  build() {
    Column() {
      Image(this.pixelMapImg)
        .alt($r('app.media.img'))
        .objectFit(ImageFit.None)
        .width('100%')
        .height('100%')
    }
  }
}

更多关于Image 使用官方 requestImageUrl 加载 PixelMap 网络图片链接失败,图片无法展示和保存到图库 (HarmonyOS 鸿蒙Next)的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

当前返回无contentType,可以主动指定下ARRAY_BUFFER https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/js-apis-http-V13#httpdatatype9

import { http } from '@kit.NetworkKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { image } from '@kit.ImageKit';

@Entry
@Component
struct ImageExample2 {
  @State pixelMapImg: PixelMap | undefined = undefined;

  aboutToAppear() {
    this.requestImageUrl('https://cs-ltb.51ydmw.com/api/user/getMyAuthorization?LOGIN_TOKEN=890351021547:1ce7fefd-c642-4fb5-bf9e-97255e941e2d&caImgSign=0d0c5c5b8320a9ae2126ea3d52a10f8c');
  }

  requestImageUrl(url: string) {
    http.createHttp().request(url,{
      expectDataType: http.HttpDataType.ARRAY_BUFFER,
    }, (error: BusinessError, data: http.HttpResponse) => {
      if (error) {
        console.error(`request image failed: url: ${url}, code: ${error.code}, message: ${error.message}`);
      } else {
        let imgData: ArrayBuffer = data.result as ArrayBuffer;
        console.info(`request image success, size: ${imgData.byteLength}`);
        let imgSource: image.ImageSource = image.createImageSource(imgData);
        let options: Record<string, number | boolean | sizeTmp> = {
          'alphaType': 0,
          'editable': false,
          'pixelFormat': 3,
          'scaleMode': 1,
          'size': { height: 100, width: 100 }
        }
        imgSource.createPixelMap(options).then((pixelMap: PixelMap) => {
          console.error('image createPixelMap success');
          this.pixelMapImg = pixelMap;
        })
      }
    })
  }

  build() {
    Column() {
      Image(this.pixelMapImg)
        .alt($r('app.media.app_icon'))
        .objectFit(ImageFit.None)
        .width('100%')
        .height('100%')
    }
  }
}

更多关于Image 使用官方 requestImageUrl 加载 PixelMap 网络图片链接失败,图片无法展示和保存到图库 (HarmonyOS 鸿蒙Next)的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


厉害了,老铁,

在HarmonyOS鸿蒙Next中,使用requestImageUrl加载PixelMap网络图片链接失败,导致图片无法展示和保存到图库,可能是由于以下原因:

  1. 网络请求权限:确保应用已经获取了网络请求权限。在config.json文件中,检查是否添加了ohos.permission.INTERNET权限。

  2. URL有效性:确认提供的网络图片链接是有效的,并且可以直接通过浏览器访问。无效或不可达的URL会导致加载失败。

  3. 网络状态:检查设备的网络连接状态,确保设备能够正常访问互联网。

  4. 异步处理:requestImageUrl是异步操作,确保在回调函数中正确处理了加载成功和失败的情况。如果回调函数未正确实现,可能会导致图片无法加载。

  5. 缓存机制:检查是否有缓存机制导致图片加载失败。尝试清除缓存或使用新的URL进行测试。

  6. 系统资源:确保设备有足够的系统资源来加载和显示图片。资源不足可能导致图片加载失败。

  7. API版本兼容性:确认使用的API版本与鸿蒙Next系统版本兼容。不兼容的API可能导致功能异常。

  8. PixelMap处理:在成功获取图片数据后,确保正确处理了PixelMap对象。错误的处理方式可能导致图片无法展示或保存。

如果以上步骤都确认无误,仍然无法解决问题,建议检查系统日志,获取更详细的错误信息,以便进一步排查问题。

回到顶部