uniapp使用阿里图标显示查找文件失败,在H5端图标显示正常但是在移动端不显示图标的问题解决,uniapp中如何使用阿里巴巴图标库

uniapp使用阿里图标显示查找文件失败,在H5端图标显示正常但是在移动端不显示图标的问题解决,uniapp中如何使用阿里巴巴图标库

报错复现

文件查找失败:'./iconfont.ttf?t=1668559618255' at App.vue:6
文件查找失败:'./iconfont.woff2?t=1668559618255' at App.vue:4
文件查找失败:'./iconfont.woff?t=1668559618255' at App.vue:5

在这里插入图片描述

  • 图标存放路径

在这里插入图片描述

报错原因

  • 在uniapp 中不能使用相对路径去引入 图标所需要的配置文件 也就是 woff2、woff、truetype 三个文件

解决办法

方式1 将引入方式改为绝对路径

  • @ 表示根目录 后面的路径根据自己存放的地址填入即可
    在这里插入图片描述

方式2 将引入方式改为在线路径(适用于临时使用)

  • 去到 阿里巴巴图标库>我的项目>Unicode
  • 复制当前 CDN 在线服务路径
  • 如果你使用了 在线路径你本地文件中 woff2、woff、truetype 三个文件 就可以删除了
    在这里插入图片描述
  • 复制的路径还需要再次修改路径 在路径前添加 https:
@font-face {
  font-family: 'iconfont';  /* Project id 1784426 */
  src: url('https://at.alicdn.com/t/c/font_1784426_ssx92i381rf.woff2?t=1668560647626') format('woff2'),
       url('https://at.alicdn.com/t/c/font_1784426_ssx92i381rf.woff?t=1668560647626') format('woff'),
       url('https://at.alicdn.com/t/c/font_1784426_ssx92i381rf.ttf?t=1668560647626') format('truetype');
}

吐槽一下

报错后改动了两次还是没能成功引用 然后我面向了百度开发,好家伙一个个误人子弟,😵‍💫全改成了网络的引入方式,后面还带了句亲测有效 。
特别让我震惊的是甚至有好几篇文章不仅让人引入在线配置文件 然后还说把 woff2、woff、truetype 三个文件导入进项目,why? 然后 三个配置文件在哪里吃灰 也不进行配置
原因不说 区别不说 管用就行???看了不下8篇的解决文章全是一个模板,我想我不记录一下这个问题都对不起自己了
碰到问题解决问题永远是第一目标,但知道问题原因才能让你知道哪种解决方式是合理的,是适用自己当前项目的

bye)🤡

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值