uniapp的原生tabbar图片加载不出来

最新推荐文章于 2024-04-28 00:03:32 发布
最新推荐文章于 2024-04-28 00:03:32 发布
阅读量1.2k 收藏 1
点赞数 1
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43313093/article/details/129558905
版权
在开发项目时遇到tabbar配置问题，经过搜索未找到答案。最终发现static文件夹放置错误，正确做法是将其移动到public文件夹下，从而解决了问题。此解决方案可能对遇到相同问题的开发者有帮助。
摘要由CSDN通过智能技术生成

tabbar图片始终加载不出来
在这里插入图片描述

这是项目结构和tabbar配置
在这里插入图片描述

在开发一个项目时遇见了这个问题，度娘也查了很久始终没找到解决方案，最后不经意间找到了问题原因———static文件夹放错位置了，将其移到public文件夹下即可正常显示。
在这里插入图片描述
在这里插入图片描述

希望能帮到你

孤舟蓑影
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
uni-app - 图片加载失败的5种场景：单个图片、v-for循环加载图片、widthFix模式下图片加载失败后高度失效等
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
10-17 1654
在uni-app开发过程中，图片加载失败是一个常见的问题。这可能是由于网络问题、图片资源不存在或者其他未知原因。在这篇文章中，我们将探讨如何处理uni-app中的图片加载失败问题，包括单个图片、v-for循环加载图片，以及图片加载失败后高度失效等等问题。
uni-app菜单tabbar（十四）
最新发布
A_nanda的博客
06-28 324
原生tabBar是相对固定的配置方式，可能无法满足所有场景，这就涉及到自定义tabBar。但注意除了H5端，自定义tabBar的性能体验会低于原生tabBar。App和小程序端非必要不要自定义。H5端的自定义tabBar组件：H5端不存在原生tabBar性能更高的概念，并且宽屏下常见的tabBar在顶部而不是底部，此时可以使用custom-tab-bar组件来自定义普通自定义tabBar：使用view自行绘制tabBar。如果页面是多页方式，切换tabBar将无法保持底部tabBar一直显示。
uniapp 客户端tabBar icon图片 不显示， h5 显示正常
m0_65730686的博客
09-16 2643
uniapp 客户端tabBar icon图片 不显示， h5 显示正常
uniapp tabBar静态图片不显示问题
qq_42038997的博客
11-01 395
不会引入page.json里图片链接。
uniapp[app端]tabBar图片不显示
qq_45625778的博客
11-17 923
解决tabBar不显示
uniapp tabBar 不显示图标问题
qq_33756292的博客
04-28 679
uniapp tabBar 不显示图标问题
【unaipp】tabBar配置/tabBar图标无法显示
Xiang_Gong_Ya_的博客
10-25 2241
原生tabBar是相对固定的配置方式，可能无法满足所有场景，这就涉及到自定义tabBar。但注意除了H5端，自定义tabBar的性能体验会低于原生tabBar。App和小程序端非必要不要自定义。H5端的自定义tabBar组件：H5端不存在原生tabBar性能更高的概念，并且宽屏下常见的tabBar在顶部而不是底部，此时可以使用 custom-tab-bar组件 来自定义普通自定义tabBar：使用view自行绘制tabBar。如果页面是多页方式，切换tabBar将无法保持底部tabBar一直显示。
uniapp：tabBar配置后不显示的问题
彭世瑜的博客
07-08 2681
tabBar.list 数组的第一项必须和pages配置中的第一项要相同。uniapp的tabBar配置后不显示。
uniapp自定义tabbar图标样式
10-13
本话题主要关注如何在uniAPP中自定义tabbar的图标样式，这对于提升应用的用户体验和品牌一致性至关重要。 首先，我们需要了解uniAPP的tabbar组件。Tabbar是底部导航栏，通常包含多个页面标签，用户可以通过点击不同...
一课一得：uniApp--tabBar的使用
fyvhhf的博客
06-14 6095
在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。在编写uni项目是，如果应用是一个多tab应用，我们可以通过tabBar配置项指定一级导航栏。以及tab切换时显示的对应页。，不能使用uni.navigateTo、uni.redirectTo；该json格式里，tabBar下面的属性。
uni-app-tabbar:uni-app底部初步实现（不支持小程序）
03-19
uni-app-tabbar uni-app底部逐步实现（不支持小程序），请使用真机调试ok app效果图如下： 安装包如下：
uniapp刷新tabbar页面
07-28
这样，当页面加载或显示时，原生tabbar将被隐藏，避免了页面刷新时的闪烁问题。\[1\] 另一种方法是将自定义tabbar的跳转方式改为uni.switchTab()，而不是使用navigator等其他跳转方式。使用uni.switchTab()可以确保...
uniapp 小程序使用自定义tabbar时 页面刷新闪烁问题
gyl_sunshine的博客
03-02 9890
先说一下解决思路 就是在pages.json里设置原生tabbar， 在页面运行的时候 ，将原生tabbar隐藏 进而解决闪烁。 其实就是用自定义tabbar外观 用原生tabbar跳转。 分三步 1.pages.json中设置原生tabbar，跳转路径要与自定义保持一致 /* 增加原生tabbar 配合自定义tabbar使用 解决自定义tabbar闪烁问题 */ "tabBar": { "backgroundColor":"#F3F2F0", "borderStyle":"whit
解决uniapp的tabBar不显示问题
qq_33756292的博客
04-27 2699
我用的是vue3开发的uniapp，参照官方文档在pages.json页面添加了tabBar节点，但是不管怎么刷新页面都不显示tabBar栏。由于我是控制台执行 npm run dev:h5 启动运行的，关掉cmd窗口，重新运行 npm run dev:h5，刷新页面就看到了。
iconPath在tabBar不能显示图片
Heartnottowake的博客
03-15 2538
今天使用uniapp设置底部导航，设置的icon不显示，一开始设置了一个文件夹存放图片，加载对应路径根本不显示，找了一圈，主要问题就是路径，图片资源需要放在static中，将路径改为static下的目录就可以正常显示了 ...
uniapp打包APP后，tabBar底部栏图片不显示，小程序正常显示
Rio_Gaven的博客
02-21 936
把设置tabBar的rpx单位换成px。
使用系统的TabBar时，图片不显示
NYH1006的专栏
02-03 1263
查看API：替换为iOS8下的方法 for (UITabBarItem *item in self.tabBar.items) {  UIImage *selectedImage = [UIImage imageNamed:XXXX];  UIImage *unselectedImage = [UIImage imageNamed:XXXX]; selectedImage = [sel
解决uniapp打包成App端运行在真机时，tabBar的图片（本地图片）无法显示
ven_cy的博客
12-07 5680
可以解决uniapp运行在真机上，tabBar图片无法显示的问题
uniapp小程序底部导航栏图片显示问题
yigeboke的博客
02-25 1145
像首页图片路径是对的,但是页面上就是显示不出来,试了好多方法儿, 后来在一篇文章中看到只要把图片放在static文件中就可以了 首页是原本的路径,发现和我的是改之后的
uniapp 原生tabbar位置自定义
12-28
在uniapp中，原生tabbar的位置是无法直接自定义的。uniapp平台底部tabbar的设置最多只支持注册5个，并且不支持自定义位置。但是，你可以通过一些技巧来实现类似自定义位置的效果。 一种方法是使用自定义组件来实现tabbar功能。你可以通过自定义view来创建一个tabbar组件，并在页面中使用该组件来展示tabbar。通过点击不同的tab来显示不同的组件，从而达到模拟原生tabbar切换效果。uniapp官方也给出了解决方案，可以自定义tabbar，但是非必要情况下不建议自定义。 另一种方法是利用uniapp提供的组件easycom模式来解决问题。你可以提前设置好组件的限制个数和占位名称，然后在页面中使用这些占位名称来展示对应的组件。这样就可以实现类似自定义tabbar位置的效果。 需要注意的是，以上方法都是通过一些技巧来实现类似自定义tabbar位置的效果，并不是直接修改原生tabbar位置的方法。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值