【HarmonyOS NEXT】Navigation的menu图标不生效

【关键字】

Navigation / menu / 图标

【问题描述】

Navigation的menu图标不生效，示例代码如下。

build() {
Column() {
Navigation() {
if (this.ShowBottomHairline) {
Divider()
.height(0.7)
.backgroundColor($r('app.color.LINE_COLOR'))
.width('100%')
.shadow({ radius: 4, color: 0xA1B5CD, offsetX: 0, offsetY: 2 }).zIndex(1000000)
}
if (this.contentView !== undefined) {
this.contentView()
}
}
.width('100%')
.title(this.NavigationTitle())
.titleMode(NavigationTitleMode.Mini)
.hideTitleBar(false)
.hideToolBar(true)
.backgroundColor(this.bgColor)
.backButtonIcon($r('app.media.nav_btn_back_padding'))
.menus([{value: "", icon: '../../resources/base/media/home.png', action: ()=>{}}])
}
}

鼠标按一下导航栏菜单位置可以发现按钮有在，但图标不显示，可以确认图片资源存在，如下图所示。

【解决方案】

可以在ets目录下新建image文件夹存储图片，icon: "./image/icon.png" 即可正常显示图片，或者使用CustomBuilder的方式也可以实现效果。

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-navigation-navigation-0000001774120150#ZH-CN_TOPIC_0000001811157830__%E8%AE%BE%E7%BD%AE%E8%8F%9C%E5%8D%95%E6%A0%8F