HarmonyOS 鸿蒙Next中Rating组件跨模块图片展示异常

HarmonyOS 鸿蒙Next中Rating组件跨模块图片展示异常 【问题描述】：Rating组件正常在hap包内使用，starStyle属性下的参数使用$r引用展示正常，但是通过在hsp包封装一个Rating组件，图片资源正常引用hsp包内的图片，但是将封装的组件导出，在hap包内使用时，图片展示异常，并且这种情况在真机和模拟器上是异常的，在预览器上是正常的，这是怎么回事？

【问题现象】：cke_19988.png

【版本信息】：IDE版本6.1.0


更多关于HarmonyOS 鸿蒙Next中Rating组件跨模块图片展示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

尊敬的开发者，您好！感谢您的反馈，问题正在加速处理中，还请关注后续版本，感谢您的理解与支持。

更多关于HarmonyOS 鸿蒙Next中Rating组件跨模块图片展示异常的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是官方的遗留问题。

引用hsp方式，你可以试试这篇《Rating组件自定义图片资源》里的解决方案。如果好使，留言，我也改一下默认。

现在我是用har方式和HSP包(tgz)把这几个uri暴露出来，调用时可传参。比如：

cke_2710.png

官方说API23有问题
cke_416.png

有用 给个采纳哈😊

跨包访问HSP内资源时，官方文档推荐实现一个资源管理类，以封装对外导出的资源，其他模块无需感知HSP内部的资源名称。当HSP内部的资源名称发生变化时，其他模块不受影响。具体实现如下：

  1. 在HSP中对外提供的资源封装为一个资源管理类。

    export class ResManager {
    static getPic(): Resource {
        return $r('app.media.image');
    }
    static getDesc(): Resource {
        return $r('app.string.test_string');
    }
}

  2. 在HSP入口文件index.ets中声明需要对外暴露的接口。

    export { ResManager } from './src/main/ets/common/ResManager';

  3. 其他模块使用import导入ResManager，访问HSP导出的资源。

    import { ResManager } from 'library'; //请将library替换为自定义的库名

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Third {
    build() {
        Column() {
            Text(ResManager.getDesc())
                .fontSize(50)
                .fontWeight(FontWeight.Bold)
            Image(ResManager.getPic())
                .height(100)
        }
        .width('100%')
        .height('100%')
    }
}

参考文档：访问跨HAP/HSP包资源

Rating组件在跨模块使用图片资源时，需确保资源通过资源限定符或专属模块路径正确引用。使用$r('app.media.xxx')或$rawfile('xxx.png')方式，并在目标模块的oh-package.json5中声明资源依赖，避免直接使用文件路径或模块内私有资源ID导致加载失败。

在 HarmonyOS Next 中，HSP（动态共享包）的 $r 资源引用与 HAP 存在模块隔离：$r 默认解析当前模块的 Resource 对象，当你在 HSP 内封装的 Rating 组件内部使用 $r('app.media.xxx') 引用 HSP 内的图片时，该 Resource 对象的 bundleName 实际指向 HSP 的包名。当该组件被导出并在 HAP 中使用时，HAP 的运行环境无法直接访问 HSP 的图片资源，导致真机/模拟器上资源加载失败。

预览器正常的原因：预览器采用轻量解析，未完全模拟模块隔离和资源路径的跨包分发逻辑，因此不报错。

解决方案：

  1. 将图片资源移至 HAP 的 resources 目录，让 Rating 使用 HAP 自身资源。
  2. 改用构造函数或属性传入 Resource：在 HSP 中为 Rating 封装组件提供 starImg?: Resource 参数，外部 HAP 传入 $r('app.media.hap_star')。
  3. 使用 $rawfile 并指定路径：若图片放在 rawfile，用 $rawfile('xxxx.png') 加载，但需保证文件在 HAP 或可访问的公共路径中。
  4. 显式指定包名：使用 $r('com.example.hsp:media:star') 格式（需确认支持），但通常不推荐跨包直接引用 HSP 资源，因为这违反动态包解耦原则。

优先推荐方案2，即通过接口传递资源，保持 HSP 的通用性。

回到顶部