uniapp使用阿里巴巴矢量图遇到的问题，报错：Cannot find module ‘./iconfont.woff2?t=xxxxx

最新推荐文章于 2024-07-18 22:35:56 发布
原创 最新推荐文章于 2024-07-18 22:35:56 发布 · 569 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #前端

本文介绍了如何在VSCode和uniapp环境下正确处理iconfont.css文件路径，特别提到在uniapp中可能需要将路径调整为`~@/static/iconfont/`，以适应不同的项目结构。

报错信息如下：

解决方法：

（vscode写法）

在vscode里上图这种路径是对的，但是如果在uniapp中需要改成：

（uniapp写法）

找到iconfont.css,注意看放在哪里，正常都是放在static下，

如果你的iconfont位置跟我一样直接在iconfont.woff2?t=xxx前面添加~@/static/iconfont/就行，如果不一样自行看在哪里只需要引用~@就行

菜菜籽油
关注
uniapp - 引入使用阿里图标后在移动端显示“文件查找失败“不显示问题，但在h5端平台却可以正常显示（uniapp引入iconfont文件报错文件查找失败：./iconfont.woff?t=）
高级前端工程师
02-01 2438
uniapp，h5，移动端，阿里图标库，阿里巴巴图标，uniapp使用阿里图标库不显示怎么办，解决uniapp引入阿里图标报文件查找失败，uniapp报错iconfont文件报错文件查找失败，uniapp移动端不显示阿里图标， uniapp app中阿里图标库不能使用，uniapp项目中iconfont阿里云图标不显示，uni-app引入阿里矢量图在移动端不显示的问题，移动端不显示但在h5网页能显示，阿里图标在移动端无法显示怎么办，如何解决uniapp引入阿里图标后在h5能显示，但在移动端平台却不显示，un
uniapp引入iconfont小程序渲染层错误
qq_45018844的博客
10-18 1398
刚开始用着好好地，突然视觉冲击； 刚开始用的网上常见的方法，然后报错，就没办法了； 正确的引入方式是,先将iconfont库进行转换,转换成base64编码之后再进行引入 这里是从iconfont官网下载的 从这里转换转换网站 然后下载解压后 打开css，复制这个就可以了 插入到自己的iconfont 最后在App.vue文件中根据文件路径引入iconfont.css文件即可使用 成功了 ...
在uni-app使用iconfont中的图标
码农键盘上的梦
04-15 8648
1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:
uniapp使用阿里图标显示查找文件失败，在H5端图标显示正常但是在移动端不显示图标的问题解决。
qq_43807473的博客
04-20 3768
uniapp使用阿里图标显示查找文件失败，在H5端显示正常但是在移动端不显示图标的问题解决！
在 uniapp 中使用 阿里巴巴矢量图标
最爱喝怡宝的博客
04-11 4431
最近要求，使用一下阿里巴巴矢量图标来替换掉项目中的某些小图片。一方面 矢量图不会失真，另一方面占用空间小了，所以去网上百度了一下，最后实现了效果，在这里分享一下我的使用过程 1.到官网，登录，没有账号的话就注册一个： iconfont-阿里巴巴矢量图标库 2.搜索自己想要的图标，并加入购物车中 3. 点击右上角 购物车 图标，打开购物车 4.点击下载代码，把下载下来的文件解压出来 5. 目前我下载的，解压出来以后，文件都是默认存放在font_i5lcy3k..
uniapp-阿里巴巴矢量图标使用（字体图标引用）
m0_62626838的博客
07-18 871
3.解压下载好的压缩包，将里面的文件全部放到static中font文件夹中（自己新建），并打开demo_index.html文件，复制其中的字体声明代码至自己的页面的css中。6、打开font文件夹里的demo_index.html，选择Unicode中复制图标的代码,用到页面中。4、修改复制过来的字体声明中的路径。（即下图的src路径需替换为font中的.tff文件）5、在页面的元素样式中需引入font-family: 'iconfont';网站，将想引入的图标加入购物车。
vue-cli引入iconfont报错These relative modules were not found: ./iconfont/iconfont.eot?t=1618541751892 in
weixin_42043912的博客
04-16 956
我在引入iconfont的时候报错说： These relative modules were not found: ./iconfont/iconfont.eot?t=1618541751892 in ./node_modules/css-loader??ref–6-1!./node_modules/postcss-loader/lib??ref–6-2!./src/assets/styles/iconfont.css ./iconfont/iconfont.svg?t=1618541751892 i
精选资源
开发工具 fontawesome-webfont.woff
05-31
开发工具 fontawesome-webfont.woff开发工具 fontawesome-webfont.woff开发工具 fontawesome-webfont.woff开发工具 fontawesome-webfont.woff开发工具 fontawesome-webfont.woff开发工具 fontawesome-webfont.woff...
vue项目引入iconfont矢量图标库
qq_44242707的博客
04-18 876
Vue项目中引入iconfont图标库的两种方式：单色字体图标和多色SVG图标。单色图标通过CSS引入和字体类名使用，可动态变色；多色图标通过JS引入和SVG标签引用，支持多路径颜色。文章详细介绍了图标文件下载放置路径、使用方法及原理说明，包括单色图标的字体实现方式和多色图标的SVG技术特点，指导开发者根据需求选择适当的图标类型。两种方式各有优势，单色图标灵活变色，多色图标视觉丰富。
阿里巴巴矢量图标库在uni-app中的使用方法
m0_58611644的博客
01-16 1610
2.打开下载到本地的项目文件，将箭头所指的四个文件放入项目的static目录下(可以新建个文件夹放入，方便管理)执行完后项目文件夹中会出现一个新的文件夹 iconfont-weapp 然后重复。3.打开iconfont.css文件，然后将顶部 @font-face{}第二种 Symbol中在图标上点复制代码 icon-icon-03_ji。替换为你的项目中Unicode下的 @font-face{}切换到刚才下载到本地的项目文件目录下执行该命令。中的2和4(只要该文件夹中的 .css文件)
uni-app 引入iconfont 报错 找不到相关文件
想吃凤梨酥的博客
08-18 555
uni-app 引入iconfont 报错 找不到相关文件
如何在uni-app中大量使用阿里巴巴矢量图图标
m0_53413858的博客
10-08 300
第一步： 先去图库里面找自己喜欢的图标然后加入购物车，然后点击购物车把选择好的图标全部添加到一个项目里面 第二步： 在添加完项目后就会出现这样一个界面，点击下载到本地 第三步 把下载的文件全部拖到你的项目里面（demo_index.html文件不用） 第四步 直接在app.vue中引用 第五步 使用方法 (我这里是class引入) <icon class="iconfont icon-xxx"></icon> 网页打开demo_index.h...
uni-app 引入阿里巴巴矢量图标详细步骤
weixin_71273777的博客
01-15 2731
在 class 中定义 iconfont。注：除了以上步骤其他步骤均没有改变。
uniapp项目真机调试的时候遇到的问题
love_yourself_ok的博客
11-17 1281
这两天在真机调试的时候，一直卡在开始安装基座的步骤，就不动了，百度了很多的方法一直不行，因为我的手机是华为手机，网上说【通过USB验证应用】的开关是要打开的，但我手机这个开关是禁用了打不开的，所以我一直以为是我手机问题。 后来终于找到一个有用的，原来是HBuilder X的问题，因为App真机运行插件的版本与当前HBuilder X的版本不同，需要卸载重新安装，再次真机运行就成功了 如果你是检测不到设备，可以把USB配置改成MIDI试试
uniapp中阿里图标库不能使用
qq_39406353的博客
06-17 833
另外，有些开发者可能会把阿里图标库的CSS文件放在项目的公共CSS中，这也可能会导致阿里图标库无法使用。这是因为公共CSS文件可能会被不同的组件或页面同时引用，而阿里图标库的CSS文件中可能包含了一些全局定义的样式，导致组件或页面之间相互干扰。总之，阿里图标库不能使用是一个比较常见的问题，在实际开发中需要认真分析问题的原因，并寻找合适的解决方法。今个刚开始学习uniapp，想着引入个自定义的阿里图标库吧，发现引入了一直不起作用，一直以为是自己的错误，最终发现并不是。@import”或“<link>"
阿里图标使用iconfont不起作用_程序猿！uni-app引入阿里矢量图和一个简单的版本更新组件...
weixin_39915500的博客
11-25 596
uni-app引入阿里矢量图和一个简单的版本更新组件作者：刘杰引入阿里矢量图减少包体积：1. 在阿里巴巴矢量图标库选择需要的Icon图标添加到购物车。点击下载代码。2. 在uni-app项目下static文件夹下新建fonts文件夹并导入下载好的的矢量图标文件夹内的iconfont.css 、iconfont.eot 、iconfont.svg 、iconfont.ttf 、iconfont.wo...
uniapp中如何使用iconfont字体图标
cuilinlong的博客
12-23 442
uniapp中如何使用iconfont字体图标
在uni-app 项目中引入字体图标
weixin_43628078的博客
04-11 322
在uni-app 项目中引入字体图标 将下载的字体图标中的iconfont.css文件，放到uni-app项目中的文件夹中，发生如下报错： 解决方案 打开iconfont.css文件，需要将其红色框起来的内容删除 删除之后效果如下，然后即可正常显示字体图标 ...
使用阿里巴巴矢量图标库的坑
weixin_62418631的博客
11-10 578
使用阿里巴巴矢量图标库的坑
文件查找失败：'./iconfont.ttf?t=1761902716275' at App.vue:6 17:41:06.630 文件查找失败：'./iconfont.woff2?t=1761902716275' at App.vue:4 17:41:06.630 文件查找失败：'./iconfont.woff?t=1761902716275' at App.vue:5
最新发布
11-01
src: url('./iconfont.woff2') format('woff2'), url('./iconfont.woff') format('woff'), url('./iconfont.ttf') format('truetype'); } ``` ⚠️ 这个 `./` 是相对于当前 CSS 文件所在的路径解析的。如果你把...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值