uni-app 在pages里配置导航栏titleIcon属性网络图片不显示

uni-app 在pages里配置导航栏titleIcon属性网络图片不显示

详细问题描述

uniapp在pages里配置titleNView导航栏titleIcon属性网络图片不显示，本地图片没问题。我查了HTML5+ API在HBuilderX2.6.9+版本支持网络路径（http/https开头的url链接）

重现步骤

{
    "app-plus":{  
        "titleNView":{  
            "buttons":[{  
                "text":"北京市",  
                "select":true,  
                "fontSize":"16px",  
                "width":"auto",  
                "float":"right"  
            }],  
            "titleText":"昵称",  
            "titleOverflow":"ellipsis",  
            "titleAlign":"left",  
            "titleIcon":"https://c-ssl.duitang.com/uploads/item/201704/10/20170410095843_SEvMy.thumb.1000_0.jpeg",  
            "titleIconRadius":"17px"  
        }  
    }
}

结果

期望

这是换成本地图片的样子

IDE运行环境说明

环境 版本号
HBuilderX 2.6.9.20200403
Windows 10

uni-app运行环境说明

环境 版本号
运行端 APP端
运行端版本号 2.6.9
创建方式 HBuilderX创建
编译模式 V3

App运行环境说明

环境 版本号
Android 8.1.0和9
手机型号 魅族和华为

更多关于uni-app 在pages里配置导航栏titleIcon属性网络图片不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

我这边测试没问题，麻烦提供一个完整的示例

更多关于uni-app 在pages里配置导航栏titleIcon属性网络图片不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已上传，请查看一下谢谢

回复 西南有归客: 我这测试没问题啊，这个项目在我这里能显示图片啊

回复 DCloud_Android_zl: 那怪事了。我这里怎么就不行呢？你的版本和我的一样吗？是公共底座还是自定义底座？

回复 DCloud_Android_zl: 解决了，下的Alpha版，运行的时候更新了调试基座，现在能显示了。正式版的基座还是老的吧，所以一直没显示出来

已上传

请问下，在app上可以显示图片了，但是在h5上面不显示图片，没有效果呀

在uni-app中，pages.json配置的titleIcon网络图片不显示的问题，主要是由于以下原因：

  1. 网络图片需要先下载到本地才能显示，但titleIcon属性不支持自动下载网络图片

  2. 解决方案有两种：

  • 使用本地图片路径
  • 在页面onLoad时通过plus API动态设置导航栏图标

动态设置示例代码：

onLoad() {
    if(plus.navigator){
        plus.navigator.setTitleNViewButtonStyle(0, {
            icon: 'https://your-image-url'
        })
    }
}
回到顶部