HarmonyOS 鸿蒙Next Navigation menu 图标不生效

【关键字】

API 10 / 资源调用 / 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: ()=>{}}])
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

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

【解决方案】

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

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