HarmonyOS鸿蒙Next中ArkTS基础组件Image加载网络图片

HarmonyOS鸿蒙Next中ArkTS基础组件Image加载网络图片

举例加载网络图片，模拟器没有任何显示
Image('https://www.baidu.com/img/flexible/logo/pc/peak-result.png')
12 回复

尊敬的开发者，您好，

使用网络图片时，需要申请权限ohos.permission.INTERNET。具体申请方式请参考声明权限。

根据提供的Url测试可以加载，Demo如下：

@Entry
@Component
struct SimpleNetImageExample {
  // 直接使用网络图片URL
  private imageUrl: string = 'https://www.baidu.com/img/flexible/logo/pc/peak-result.png';

  build() {
    Column() {
      Image(this.imageUrl)
        .width(100)
        .height(100)
        .objectFit(ImageFit.Contain)
        .alt($r('app.media.background')) // 加载时的占位图
        .onError((err: ImageError) => {
          console.error(`图片加载失败: ${err.message}`);
        })
        .onComplete(() => {
          console.info('图片加载完成');
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .background(Color.Black)
  }
}

由于此图片的颜色为白色，将布局背景设置为黑色，图片显示的才会清晰。

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


Image 加载网络图没有显示，先确认不是网络权限和回调问题。远程 URL 场景建议先在 module.json5 声明 INTERNET 权限，然后给 Image 加 onComplete/onError，看看是下载失败、解码失败，还是组件尺寸为 0。

另外不要只在 Previewer 里判断结果，网络图最好在模拟器或真机上验证。可以先换成一个你自己可控的 https 图片地址，排除站点防盗链、重定向、证书链或图片格式问题。

最小排查写法是：给 Image 明确 width/height，加 objectFit，再打印 onError 的错误信息。能看到错误阶段后，基本就能判断是权限、网络、证书还是布局问题。

谢谢各位，加了权限就可以了。

在module.json5里加上网络权限，即可如有帮助给个采纳谢谢

"requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      },
]
  1. 我试了一下图片是可以访问的，看你的情况可能是未申请网络权限，HarmonyOS应用访问网络必须显式声明ohos.permission.INTERNET权限，否则Image组件无法从网络获取图片数据。
  2. 在项目的module.json5文件中添加以下权限声明：
  3. {
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

在module.json5里加上网络权限：

"requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      },
]

cke_1053.png

你好，先确保网络权限已添加。

1、在“src/main/module.json5”的requestPermissions层级中添加网络权限。

{
  "module": {
    // ...
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

2、这是一张带透明的白色图片，给组件加上黑色背景就能看到了。

Image('https://www.baidu.com/img/flexible/logo/pc/peak-result.png')
  .width('100%')
  .backgroundColor('#000')

cke_1351.png

配置网络权限。你Image是不是白底，加个Color。这张图片是白色透明的。

Image('https://www.baidu.com/img/flexible/logo/pc/peak-result.png')
          .backgroundColor(Color.Gray)

如果还有图片，没显示出来，看log，如果log里出现是权限问题，用rcp绕过。

aboutToAppear(): void {
    this.getPicRCP()
  }
@State imgSrc:image.PixelMap | undefined = undefined;
imgUrl:string = 'https://www.baidu.com/img/flexible/logo/pc/peak-result.png';
  getPicRCP(){
    // 创建会话时配置安全选项
    let securityConfig: rcp.SecurityConfiguration = {
      remoteValidation: 'skip' // 跳过证书验证
    };

    let sessionCfg: rcp.SessionConfiguration = {
      requestConfiguration: {
        security: securityConfig
      }
    };

    const session = rcp.createSession(sessionCfg);
    session.get(encodeURI(this.imgUrl)).then(async (response) => {
      console.info('请求成功:', response.body);
      const imageSource = image.createImageSource(response.body as ArrayBuffer);
      const pixelMap = await imageSource.createPixelMap();
      this.imgSrc = pixelMap;
      imageSource.release()
    }).catch((err: BusinessError) => {
      console.error('请求失败:', err.code, err.message);
    });
  }

调用的地方

Image(this.imgSrc)

这个写法本身没问题，但 HarmonyOS NEXT 模拟器加载网络图片不显示，一般是下面几个原因：

1、没申请网络权限（最常见）

检查 module.json5 是否声明：

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

没有这个权限，网络图片不会加载。

2、图片链接本身有防盗链 / 重定向

你这个：

Image('https://www.baidu.com/img/flexible/logo/pc/peak-result.png')

百度有时会做：

  • 防盗链
  • UA 校验
  • 重定向

模拟器请求可能被拦。

建议换官方稳定测试图：

Image('https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/home/new_home/logo.png')
  .width(200)

3、没设置尺寸

有时候没显式宽高看起来像“没显示”。

建议：

Image('xxx')
  .width(200)
  .height(100)

4、模拟器网络问题

DevEco 模拟器偶尔网络能力异常。

可以验证：

  • 模拟器浏览器能不能打开该图片 URL
  • 换真机测试

很多时候真机正常，模拟器不显示。

5、HTTPS 证书链问题

部分站点证书兼容性问题，模拟器加载失败。

建议最小验证代码：

Column() {
  Image('https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/home/new_home/logo.png')
    .width(200)
    .height(80)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)

如果这个能显示，说明你的 Image 用法没问题，是百度链接或模拟器网络的问题。

一句话：

优先检查 INTERNET 权限，其次换一个稳定直链图片测试；HarmonyOS 模拟器对部分外网图片地址兼容性一般，真机测试更准。

网络权限声明了没有，宽高也设置一下看看

在HarmonyOS Next的ArkTS中，Image组件加载网络图片：直接设置src属性为URL。需在module.json5中声明ohos.permission.INTERNET权限。支持placeholder属性设置加载占位图，error属性设置加载失败图。网络图片默认启用缓存。

在 HarmonyOS Next 的模拟器中，Image 组件加载网络图片不显示通常是因为未配置网络权限或图片加载需使用 $r 资源前缀。请确保：

  1. 申请网络权限：在 module.json5 中添加 "ohos.permission.INTERNET"。
  2. 使用正确语法：直接传入普通字符串默认仅支持本地路径或资源，网络图片需使用 Image($r('app.media.xxx')) 或配合网络加载库。若确需简单网络图片，推荐使用 Image('https://...') 并确保 src 字符串为网络地址，但模拟器需联网且权限已配置。
  3. 排查模拟器网络：模拟器可能未连接外网，可尝试用真机调试。

示例权限配置：

"requestPermissions": [{"name": "ohos.permission.INTERNET"}]

如仍无效，替换为本地图片验证组件是否正常，再逐步调试网络加载。

回到顶部