HarmonyOS 鸿蒙Next标准前景图和后景图

HarmonyOS 鸿蒙Next标准前景图和后景图 本人在鸿蒙DEvEco Studio上开发的App,在上架检测时每次都出现“resource/base/media文件下找不到分层文件中配置的前景图和后景图”,请哪位大神帮忙检测一下,下图是否为鸿蒙标准前景图和后景图,也求提供鸿蒙标准前景图和后景图(如有)各一张,非常感激!(下图大小为1024*1024, 51kB)

图片

图片


更多关于HarmonyOS 鸿蒙Next标准前景图和后景图的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

开发者您好,根据您描述中的报错信息,需要排查配置:请参见配置分层图标和应用名称。(您需要的前后景图2楼开发者已提供)查看方式二,主要排查以下三点:

  1. 前景资源和背景资源文件是否放在“entry\src\main\resources\base\media”文件夹下;
  2. 是否在“entry\src\main\resources\base\media”文件夹下layered_image.json分层图标资源文件中,配置分层图标的前景资源与背景资源信息;
  3. 如果需要在桌面显示UIAbility图标,除了需要配置icon与label字段,还需要在skills标签下面的entities中添加"entity.system.home"、actions中添加"ohos.want.action.home",是否有配置。

如果排查修改后依然无法解决问题,请及时反馈并提供报错信息和可以复现的demo,方便问题分析解决。

更多关于HarmonyOS 鸿蒙Next标准前景图和后景图的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


两张图片均为 PNG 格式,尺寸 1024×1024,常规使用不会出现明显问题。如果对画面细节有较高要求,正常前景素材应当去除底色,而你当前的前景图带有 #414141 灰色背景。该灰色图层会叠加在黄色底图之上,产生遮挡覆盖效果,导致成品底色无法还原背景图原本的纯黄色。

图片资源准备好后,图片资源一般只放在AppScope全局下即可,随后对layered_image.json进行配置,为了保险起见,需要配置两处地方,模块级跟全局【src/main/resources/base/media/layered_image.json】【AppScope/resources/base/media/layered_image.json】

cke_4498.png

cke_10045.png

附上标准前景图与背景图

cke_18920.png

cke_21181.png

非常感谢蓝瘦的蜕变!

背景知识:

cke_723.png

然后将 layered_image.json 配置到 app.json5-icon 和 module.json5 - abilities - icon就完成了。

注意:图片一定要是1024*1024

参考地址:配置分层图标和应用名称

这个报错通常不是单张图片“是不是标准图”的问题,而是分层图标 JSON 里引用的前景/背景资源没有被资源编译器找到。

可以按这个结构检查:

  1. 如果应用图标配置引用的是 $media:layered_image,就放一个 layered_image.json

  2. layered_image.json 里引用两张 media 资源,例如:

{
  "layered-image": {
    "background": "$media:background",
    "foreground": "$media:foreground"
  }
}
  1. 同一套 resources/base/media 里必须同时存在 background.pngforeground.pnglayered_image.json,文件名大小写要完全一致,不要在 JSON 里写 png 后缀或相对路径。

  2. AppScope 的应用图标资源和 entry 模块里的 Ability 图标资源不要混放:配置在哪个资源作用域引用,就把这三个文件放到对应作用域的 media 目录。改完后 Clean/Rebuild,再重新做上架检测。

前景图一般用透明 PNG,只放主体;背景图用不透明底图。你现在的 1024x1024 图片如果只是一张合成图,不能替代分层配置里的 foreground/background 两张资源。

配置分层图标和应用名称

方式一:配置app.json5

该配置仅当module.json5配置文件中无UIAbility、或者存在UIAbility但abilities标签中未设置icon和label(可手动删除icon和label配置)时生效。

  1. 将前景资源和背景资源文件放在“AppScope\resources\base\media”文件夹下。

    本例中,前景资源文件名为“foreground.png”,背景资源文件名为“background.png”。

  2. 在“AppScope\resources\base\media”文件夹下app_layered_image.json分层图标资源文件中,配置分层图标的前景资源与背景资源信息。

    {
      "layered-image":
      {
        "background" : "$media:background",
        "foreground" : "$media:foreground"
      }
    }
    
  3. app.json5配置文件中引用分层图标资源文件。示例如下:

    {
      "app": {
        // ...
        "icon": "$media:layered_image",
        "label": "$string:app_name" // 需要在AppScope/resources/base/element/string.json配置name为app_name的资源,已存在可以忽略
      }
    }
    

方式二:配置module.json5

  1. 将前景资源和背景资源文件放在“entry\src\main\resources\base\media”文件夹下。

    本例中采用的前景资源和背景资源的文件名分别为“foreground.png”和“background.png”。

  2. 在“entry\src\main\resources\base\media”文件夹下layered_image.json分层图标资源文件中,配置分层图标的前景资源与背景资源信息。

    {
      "layered-image":
      {
        "background" : "$media:background",
        "foreground" : "$media:foreground"
      }
    }
    
  3. 如果需要在桌面显示UIAbility图标,除了需要配置icon与label字段,还需要在skills标签下面的entities中添加"entity.system.home"、actions中添加"ohos.want.action.home"。

    {
      "module": {
        // ...
        "abilities": [
          {
            // ...
            // icon配置为分层图标资源文件的索引
            "icon": "$media:layered_image",
            // 需要在entry/src/main/resources/base/element/string.json配置name为EntryAbility_label的资源,已存在可以忽略
            "label": "$string:EntryAbility_label",
            "skills": [
              {
                "entities": [
                  "entity.system.home"
                ],
                "actions": [
                  "ohos.want.action.home"
                ]
              }
            ]
          }
        ],
        // ...
      }
    }
    

说明

DevEco Studio NEXT Beta1(5.0.3.814) 及之后的版本,创建应用时默认模板中包含分层图标的资源文件,不同版本生成的资源文件名称可能不同,文件名称支持手动修改。如果分层图标资源文件不存在则需要手动创建,文件名称需要符合资源命名规范,由数字、字母、点和下划线组成。

在HarmonyOS Next中,标准前景图(Foreground)和后景图(Background)用于组件层叠显示:后景图作为组件底层背景,通过background属性或Background组件设置;前景图覆盖在内容之上,使用.foregroundImage()overlay实现。两者均支持图片、颜色或渐变,需按组件层级合理布局。

在鸿蒙分层图标配置中,前景图和背景图通常要求放在 resources/base/media 目录下(注意是 resources,不是 resource),标准命名为 foreground.png(前景图)和 background.png(背景图)。

检测报错,最常见原因不是图片本身尺寸或样式问题,而是文件名或路径与分层图标配置(如 layer_icon.json)里的引用不一致。

  • 前景图:建议使用透明背景的 PNG,图标主体居中,安全区留白。
  • 背景图:可为纯色、渐变色或图形纹理,不要求透明。

您提供的 1024×1024 尺寸本身没问题,只要命名和配置正确即可通过检测。如果需要标准样例,直接新建一个 DevEco Studio 默认工程,从模板中自动生成的 resources/base/media/background.pngforeground.png 就是符合鸿蒙规范的标准分层图标图片,可复制使用。

回到顶部