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


更多关于HarmonyOS 鸿蒙Next标准前景图和后景图的实战教程也可以访问 https://www.itying.com/category-93-b0.html
开发者您好,根据您描述中的报错信息,需要排查配置:请参见配置分层图标和应用名称。(您需要的前后景图2楼开发者已提供)查看方式二,主要排查以下三点:
- 前景资源和背景资源文件是否放在“entry\src\main\resources\base\media”文件夹下;
- 是否在“entry\src\main\resources\base\media”文件夹下layered_image.json分层图标资源文件中,配置分层图标的前景资源与背景资源信息;
- 如果需要在桌面显示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】


附上标准前景图与背景图


非常感谢蓝瘦的蜕变!
背景知识:

然后将 layered_image.json 配置到 app.json5-icon 和 module.json5 - abilities - icon就完成了。
注意:图片一定要是1024*1024
参考地址:配置分层图标和应用名称
这个报错通常不是单张图片“是不是标准图”的问题,而是分层图标 JSON 里引用的前景/背景资源没有被资源编译器找到。
可以按这个结构检查:
-
如果应用图标配置引用的是
$media:layered_image,就放一个layered_image.json。 -
layered_image.json里引用两张 media 资源,例如:
{
"layered-image": {
"background": "$media:background",
"foreground": "$media:foreground"
}
}
-
同一套
resources/base/media里必须同时存在background.png、foreground.png、layered_image.json,文件名大小写要完全一致,不要在 JSON 里写png后缀或相对路径。 -
AppScope的应用图标资源和entry模块里的Ability图标资源不要混放:配置在哪个资源作用域引用,就把这三个文件放到对应作用域的media目录。改完后 Clean/Rebuild,再重新做上架检测。
前景图一般用透明 PNG,只放主体;背景图用不透明底图。你现在的 1024x1024 图片如果只是一张合成图,不能替代分层配置里的 foreground/background 两张资源。
配置分层图标和应用名称
方式一:配置app.json5
该配置仅当module.json5配置文件中无UIAbility、或者存在UIAbility但abilities标签中未设置icon和label(可手动删除icon和label配置)时生效。
-
将前景资源和背景资源文件放在“AppScope\resources\base\media”文件夹下。
本例中,前景资源文件名为“foreground.png”,背景资源文件名为“background.png”。
-
在“AppScope\resources\base\media”文件夹下app_layered_image.json分层图标资源文件中,配置分层图标的前景资源与背景资源信息。
{ "layered-image": { "background" : "$media:background", "foreground" : "$media:foreground" } } -
在app.json5配置文件中引用分层图标资源文件。示例如下:
{ "app": { // ... "icon": "$media:layered_image", "label": "$string:app_name" // 需要在AppScope/resources/base/element/string.json配置name为app_name的资源,已存在可以忽略 } }
方式二:配置module.json5
-
将前景资源和背景资源文件放在“entry\src\main\resources\base\media”文件夹下。
本例中采用的前景资源和背景资源的文件名分别为“foreground.png”和“background.png”。
-
在“entry\src\main\resources\base\media”文件夹下layered_image.json分层图标资源文件中,配置分层图标的前景资源与背景资源信息。
{ "layered-image": { "background" : "$media:background", "foreground" : "$media:foreground" } } -
如果需要在桌面显示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.png 和 foreground.png 就是符合鸿蒙规范的标准分层图标图片,可复制使用。
