最近在开发uniapp项目时,在H5端,图片是能正常显示,但在打包成app端运行在真机上时,发现tabBar的图片显示不了,折腾了一天终于找到问题所在。
遇到这种问题,我们首先可以去根目录下的unpackage/dist/dev/app-plus下的static(就是你存放静态图片),去看看这里面有没有你tabBar所需要的图片,我这里是没有的。
我想要的图片路径
但是unpakege里面的app-plus/static/icon里面却没有找不到tabBar图片所在的page目录
所以这就是导致tabBar的图片显示不了的原因(路径找不到图片)
原因我也说不清楚,可能就是pages.json里面的静态图片路径,在打包的时候并不会自动加入到unpackage里面,但是如果页面有引用的话,他就可以自动加入进去
所以有一个简陋的方法就是:
随便在一个页面(我是放在index页)引入tabBar所需的图片,那些图片就会加入到unpackage里面,这样就能通过找到相应的图片了
<!-- 解决打包时app端没有把tabBar的图片打包进去,导致app端的tabBar图片无法正常显示,用v-if把内容隐藏,不影响页面展示-->
<view v-if="false">
<image src="~@/static/icon/page/home2.png"></image>
<image src="~@/static/icon/page/index_home-two.png"></image>
<image src="~@/static/icon/page/degreehatone.png"></image>
<image src="~@/static/icon/page/degreehattwo.png"></image>
<image src="~@/static/icon/page/find1.png"></image>
<image src="~@/static/icon/page/find2.png"></image>
<image src="~@/static/icon/page/avataro.png"></image>
<image src="~@/static/icon/page/avatart.png"></image>
</view>
注意图片路径前缀要加上~@,这样才能把图片加入到unpackage里面,同时你也可以用v-if隐藏掉这些图片,这样就不会影响你当前页面展示了
可以看到unpackage里面有了tabBar所需的目录跟图片
这样就可以正常显示了,做法很丑陋哈哈哈,如果各位有更好的办法可以说说
如果unpackage中有你所需的图片,还是无法正常显示的话,那应该是路径问题