自定义tabbar里的图片加载不出来

分类：uni-app

我在网上看到一个自定义tabbar的使用教程如下链接：
https://blog.csdn.net/weixin_39872588/article/details/82346483

在子组件里有如下设置：
<div class="itemWarp flex_mid" @click='changePage'>
<span v-show='!bol'>
<slot name='normalImg'></slot>
</span>
<span v-show='bol'>
<slot name='activeImg'></slot>
</span>
<span style="font-size: 12px;" v-text='txt1'></span>
<span style="font-size: 18px;" v-text='txt2'></span>
</div>

父组件里将子组件导入成Item slot里加入图片：
<Item class="item_chat" :txt2='tabbarDes[1].txt' :page='tabbarDes[1].page' @change='getVal' :sel='selected'>

            <img :src='tabbarDes[1].normalImg' slot='normalImg'>  
            <img :src='tabbarDes[1].activeImg' slot='activeImg'>  
        </Item>

tabbarDes定义如下：
tabbarDes:[
{
txt:'首页',
page:'index/index',
normalImg:'../../static/tabbar/main_01.png',
activeImg:'../../static/tabbar/main_02.png'

                },                
                {  
                    txt:'聊天',  
                    page:'chat/chat',  
                    normalImg:require("../../assets/image/tabbar/chat_01.png"),  
                    activeImg:require("../../assets/image/tabbar/chat_02.png")  
                },  
                {  
                    txt:'我的',  
                    page:'my/my',  
                    normalImg:'../../static/tabbar/my_01.png',  
                    activeImg:'../../static/tabbar/my_02.png'  
                }  
            ]

再在界面中也导入此父组件使用显示，但是在网页上显示正常，真机调试时图片总是显示不出来，
网页显示图片和真机调试时的图片显示如下：

请问是什么问题呢。？