解决uniapp打包成App端运行在真机时，tabBar的图片（本地图片）无法显示

 

最近在开发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中有你所需的图片，还是无法正常显示的话，那应该是路径问题