uniapp - 引入使用阿里图标后在移动端显示“文件查找失败“不显示问题，但在h5端平台却可以正常显示（uniapp引入iconfont文件报错文件查找失败：./iconfont.woff?t=）

已于 2024-07-29 14:09:27 修改
阅读量2.1k 收藏 3
点赞数 8
分类专栏： 前端常见问题解决 前端组件与功能(开箱即用) 文章标签： uniapp 阿里图标 uniapp阿里图标不显示咋办 uniap如何正确使用阿里图标 iconfont图标查找失败 .iconfont.woff 在h5端能显示但在移动端不显示
于 2024-02-01 15:26:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/135974807
版权
前端组件与功能(开箱即用) 同时被 2 个专栏收录
331 篇文章 1822 订阅 ¥9.90 ¥99.00
订阅专栏
前端常见问题解决
126 篇文章 140 订阅 ¥9.90 ¥99.00
订阅专栏
在uniapp开发中，阿里图标在h5端显示正常，但编译到移动端时出现‘文件查找失败：./iconfont.woff2?t=xxx’的错误。解决方法是将iconfont.css中相对路径改为绝对路径@/，但在移动端仍无法显示。最终通过在阿里图标网站获取项目代码，替换并添加https:前缀，确保H5和移动端都能正常显示。
摘要由CSDN通过智能技术生成

问题说明

支持nvue组件！

在uniapp开发中，在h5端使用阿里图标正常显示，编译到移动端却显示文件查找失败，并报错：文件查找失败：‘./iconfont.woff2?t=xxx’，详细解决办法。

解决了文件查找失败问题，只能在h5平台正常显示，切换移动端就又不显示了。。。

附带详细解决方法和示例代码，只要遇到的问题一致就可以搞定。

解决方法

<

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 8
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
【uni-app】uni-app-微信小程序项目笔记
wy233333的博客
04-03 1871
目录1. 项目搭建1.1 新建项目1.2 新增 tabbar 页面1.4 uni-api 1. 项目搭建 1.1 新建项目 创建项目 vue create -p dcloudio/uni-preset-vue dnpicture 安装 sass依赖 npm install sass-loader node-sass 1.2 新增 tabbar 页面 1.4 uni-api ...
uniapp bug解决：uniapp文件查找失败:‘uview-ui‘ at main.js:14
最新发布
肥晨开发的学习之路
07-19 1015
文件中配置 easycom 组件模式，确保 uView 的组件可以在项目中被正确引用。欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。标签中的首行位置引入 uView 的基础样式，确保给。文件中引入 uView 的 SCSS 主题文件。文件中引入并使用 uView 的 JS 库。改成具体文件路径即可。
uniapp使用阿里巴巴矢量图遇到的问题，报错：Cannot find module ‘./iconfont.woff2?t=xxxxx
JPQLGZPW的博客
02-27 322
如果你的iconfont位置跟我一样直接在iconfont.woff2?t=xxx前面添加~@/static/iconfont/就行，如果不一样自行看在哪里只需要引用~@就行。找到iconfont.css,注意看放在哪里，正常都是放在static下，（vscode写法）（uniapp写法）
uniapp小程序引用阿里图标报错的解决方案
pgzero的博客
05-09 1427
一、从图标库下载图标至本地 二、把下载下来的iconfont.css文件放入项目 三、复制在线链接代码到iconfont.css并替换@font-face（注：只需留src只需要留ttf格式地址） 四、在文件的style中引入文件 @import url('/static/icon/iconfont.css'); 五、在组件中使用即可 ...
[uniapp] 文件查找失败：‘./iconfont.woff?t=1703574566334‘
JiuMeilove的博客
12-26 661
uniapp引入图标的时候如果没有处理,就会报这个错误,这个错误是因为字体图标用的相对路径,uniapp不允许,uniapp 报错 文件查找失败：‘./iconfont.woff?t=1703574566334’所以要解决这个错误,只需要我们去到iconfont.css文件内将相对路径改为绝对路径就好。
uniapp使用阿里图标显示查找文件失败，在H5端图标显示正常但是在移动端不显示图标的问题解决，uniapp中如何使用阿里巴巴图标库
dccose的博客
11-16 287
uniapp使用阿里图标显示查找文件失败，在H5端图标显示正常但是在移动端不显示图标的问题解决，uniapp中如何使用阿里巴巴图标库
uni-app黑马优购解决分类栏获取图片失败问题
qq_52045491的博客
01-06 492
问题：[渲染层网络层错误] Failed to load image 这是因为 main.js 里面挂在的网址根目录不能用了。完美解决，不会影响其他数据请求。解决：把根目录地址改成。
uniapp使用阿里图标显示查找文件失败，在H5端图标显示正常但是在移动端不显示图标的问题解决。
qq_43807473的博客
04-20 3599
uniapp使用阿里图标显示查找文件失败，在H5端显示正常但是在移动端不显示图标的问题解决！
uniapp的admin首次运行遇到 “文件查找失败“
weixin_52160685的博客
03-08 5218
uniapp的admin首次运行遇到 "文件查找失败"
uniapp踩坑-文件查找失败：‘uview-ui‘ at main.js
wtxiaobaishu的博客
10-21 4109
uniapp踩坑-报错：文件查找失败：'uview-ui' at main.js
png转svg格式并上传至iconfont-附件资源
03-05
png转svg格式并上传至iconfont-附件资源
uniapp-h5运行报错-文件查找失败
qq_65497038的博客
10-19 1330
解决方法：根目录打开终端运行 npm install。
vue引入iconfont 报错 vue-cli引入iconfont报错These relative modules were not found: ./iconfont/iconfont.eot?t
蓝胖子的博客
02-21 2381
* ./iconfont.ttf?t=1645407420543 in ./node_modules/css-loader??ref--6-1!./node_modules/postcss-loader/lib??ref--6-2!./src/assets/icons/iconfont.css * ./iconfont.woff2?t=1645407420543 in ./node_modules/css-loader??ref--6-1!./node_modules/postcss-loader/lib
解决uniapp App端iconfont图标显示异常问题
我的博客
04-14 2265
原来的iconfont.css： @font-face { font-family: "iconfont"; /* Project id 2762712 */ src: url('iconfont.woff2?t=1631523743638') format('woff2'), url('iconfont.woff?t=1631523743638') format('woff'), url('iconfont.ttf?t=1631523743638') format(
明明已经正确引入了iconfont.woff2文件，为什么浏览器还会报Failed to decode downloaded font？
宋承佑
06-21 1933
问题背景 在开发网站的时候，难免会用到iconfont图标库文件，但是会出现，Failed to decode downloaded font这种错误。这里特指的是没有使用打包工具等方式的引入，这里我遇到的就是普通的引入方式。 上图的这个报错，我原先使用的是官方默认给的引入方式，后来将iconfont.woff2装成了base64的格式，打开依然是报这个错误。 解决方法 直接去iconfont官网去生成对应的在线地址。就可以解决以上问题了。 ...
AI将png图片转换为矢量图并上传到阿里云iconfont
热门推荐
UserGuan的博客
12-03 1万+
AI将png图片转换为矢量图并上传到阿里云iconfont
png转svg 上传iconfont / inkscape
Holly1945的博客
05-10 540
https://www.pianshen.com/article/99871368415/ 下载inkscape 文件 打开png图片 选中图片 图层 -> 层置顶 路径-> 临摹位图轮廓 -> 多次扫描 ->勾选删除背景（重点）-> 确定 -> 关闭 文件存储为svg 上传iconfont ...
如何将自己设计的图标或通过网上下载的图标上传到阿里图标图库中使用方法教程
张国军_Suger
04-04 7523
如何将自己设计的图标或通过网上下载的图标上传到阿里图标图库中使用方法教程 作者：张国军_Suger 开发工具与关键技术：Win10、项目、图标         对于编程人员来说，有一个不可获取的图库就是阿里图标库，这个图标库可以帮助我们把很多图标编译成文件，这样就可有方便我们调用。不需要繁杂的操作，只需按照步骤来就会变...
使用uniapp开发H5项目在外层使用了v-if进行显示隐藏内部点击事件不生效了怎么解决
05-26
在使用 `v-if` 来控制元素显示和隐藏时，如果元素被隐藏了，那么元素上的事件是不会触发的，这是 Vue.js 的特性。 解决方法： 1. 使用 `v-show` 替代 `v-if`，因为 `v-show` 只是通过控制元素的显示和隐藏，不会真正的从 DOM 中移除元素，所以事件仍然可以触发。 2. 可以将点击事件绑定到外层元素，然后通过事件冒泡机制来处理内部元素的点击事件。例如： ```html <template> <div @click="handleClick"> <div v-if="show">这里是需要隐藏显示的元素</div> </div> </template> <script> export default { data() { return { show: false } }, methods: { handleClick() { // 处理点击事件 } } } </script> ``` 在这个例子中，我们把点击事件绑定在外层 `div` 元素上，然后在 `handleClick` 方法中进行内部元素的判断和处理。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值