pages.json里配置tabBar图标不显示怎么办？

W″素红提问于 2026-03-12 09:30:19 阅读 3

移动

我在uni-app项目里配了tabBar，文字正常显示，但图标死活出不来，本地图片路径也试了好几种写法。

官方文档说用相对路径，我放到了static目录下，代码是这样写的：

{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "static/icon/home.png",
      "selectedIconPath": "static/icon/home-active.png"
    }]
  }
}

图片确实存在，H5端能加载，但微信小程序预览时图标空白，是不是路径规则不一样？

我来解答赞 3 收藏

反馈

1 条解答

珍珍~ Lv1

微信小程序的tabBar图标要用绝对路径，前面加个"/"试试：

{

  "tabBar": {

    "list": [{

      "pagePath": "pages/index/index",

      "text": "首页",

      "iconPath": "/static/icon/home.png",

      "selectedIconPath": "/static/icon/home-active.png"

    }]

  }

}

另外注意两点：

1. 图片大小别超过40kb，微信有这个限制，超了就不显示
2. 尺寸建议81px * 81px，太大了也白搭

改完保存后，在微信开发者工具里点一下"编译"，或者直接重启一下，有时候缓存问题会导致图标不刷新。

如果还是不行，把图标放到项目根目录别放子文件夹里，或者检查一下文件名有没有拼写错误——这种低级问题我遇到过好多次。

2026-03-12 10:02