在uni-app当中引入本地图片注意事项以及阿里矢量图iconfont.css当中文件查找失败:‘./iconfont.eot解决办法

最新推荐文章于 2024-02-27 13:01:11 发布
最新推荐文章于 2024-02-27 13:01:11 发布
阅读量3.3k 收藏 5
点赞数
分类专栏： Vue uni-app 文章标签： icon 阿里矢量图 image
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_36728518/article/details/118022404
版权
Vue 同时被 2 个专栏收录
25 篇文章 3 订阅
订阅专栏
uni-app
12 篇文章 5 订阅
订阅专栏

一、uni-app及其vue项目中引入阿里矢量图iconfont.css无法找到 ./iconfont.eot?t=1606800914535，应该使用绝对路径

 使用绝对路径

二、uni-app引入本地图片需要注意

1、在js中通过require() 引入图片（图片大小不能超过3kb）

{img:require('@/static/xmkysc.png')},

2、在html中通过相对路径引入（绝对路径打包后图片不显示）

<image class="img" src="../../static/banner.png" mode="" ></image>

 

 
 

任磊abc
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
iconfont.eot
11-02
iconfont.eot
uniapp 引用图片地址
wangjun5159的专栏
01-04 1万+
根据uniapp官方目录结构，静态资源都放在static目录下 结合vue loader处理资源路径原则 如果路径是绝对路径 (例如 /images/foo.png)，会原样保留。 所以代码中可以这样写 <template> <img src="/static/some.png"/> </template> ...
uniapp引入本地图片
Qing_X_C的博客
07-31 1万+
注意使用相对路径，需要require <image class="" mode="aspectFill" :lazy-load="true" :src="require('./img/beauty.png')" />
uniapp使用阿里巴巴矢量图遇到的问题，报错：Cannot find module ‘./iconfont.woff2?t=xxxxx
最新发布
JPQLGZPW的博客
02-27 208
如果你的iconfont位置跟我一样直接在iconfont.woff2?t=xxx前面添加~@/static/iconfont/就行，如果不一样自行看在哪里只需要引用~@就行。找到iconfont.css,注意看放在哪里，正常都是放在static下，（vscode写法）（uniapp写法）
uniapp新建文件保存本地 file.js
07-20
uniapp新建文件保存本地 file.js
uni-app：多种方法写入图片路径
weixin_46001736的博客
10-23 2949
uni-app：多种方法写入图片路径
uni-app微信小程序image引入图片；background-image背景图引入图片；小程序预览本地图片；小程序图片过大引入报错；获取本地图片的网络地址；
热门推荐
i_am_a_div的博客
07-21 1万+
uni-app小程序图片使用有image标签和background-image背景图两种方式： 下有获取本地图片的网络地址方式：见第四步 一、方式一：使用image标签引入： 1.官方文档说：src 仅支持相对路径、绝对路径，支持 base64 码；但是我使用了网络地址https也可以显示 目前支持以下四种方式引入： <view>引入image的绝对路径src：</view> <image src="~@/static/iconimg/big.png"
uniapp加载本地图片的坑
weixin_43575792的博客
08-23 1万+
问题 这次遇到的问题是在uniapp内加载本地图片，本来我在image的src里面直接填写本地图片路径是毫无问题的，后面我将路径填写在绑定的数据src上,直接不显示了。 原先的写法和效果图 出错的写法和效果图，不显示但也不报错 解决 其实这属于uniapp的一个坑，因为博主尝试将src的内容换成网络图片路径，如下图是可以正常使用的，所以只有加载本地图片时会出现这种问题，解决的办法也很简单，在src里面的内容加上require("") 具体的写法如下： 加载成功 上述内容如果存在问题欢迎大家批评
uniapp动态绑定图片路径打包后图片资源获取失败的问题
mini_1251861209的博客
01-05 5644
类似于vue，uniapp中的图片路径要么就直接写进标签中，例如： <img class="banner_img" src="../../static/img/1002.png"></img> 这时，相对路径或者绝对路径都可以使用 但是如果要动态绑定图片路径，使用相对路径之后打包出来就会报找不到资源的错误，这时有两种解决方案： 一、使用require先将图片资源当成模块引入到页面中，再调用（不推荐） <img class="header-banner-img" :
uni-app 本地图片引入问题
逍遥
07-07 9887
uni-app版本2.7.14.20200618 在js中通过require() 引入图片（图片大小不能超过3kb） {img:require('@/static/xmkysc.png')}, 在html中通过相对路径引入（绝对路径打包后图片不显示） <image class="img" src="../../static/banner.png" mode="" ></image> ...
uni-app动态加载图片图片不显示
qq_46030883的博客
05-06 6789
uniapp图片加载不出来的解决方案 //分为两种 1 2 //第一种 //使用v-bind + require 1 2 3 4 5 //第二种 //第一种可以解决99%的问题，若有1%的没解决，可以使用background-image属性 background-image:url(…/…/static/picture.png); //使用图片的最好是，本地图片使用背景图，万无一失，网络图片使用image src。 ...
webpack-iconfont-plugin-nodejs:使用svg文件构建iconfont文件（ttf，woff2，woff，eot，svg），css文件，js数据文件和html预览文件。 由nodejs或webpack运行
04-27
更改或添加任何svg文件时，将重建Iconfont文件和css文件，然后页面将刷新。 支持直接由nodejs运行。 修复了具有相同svg文件的输出文件。 这意味着，如果不更改svg文件，则即使重新构建它们，所有输出文件（ttf，...
论文研究-Stress Electric-Field Dependent TDDB Characteristics of Ultra-Thin HfN/HfO2 Gate Stack with 0.9 nm EOT.pdf
08-14
超薄HfO2高K栅介质中电场依赖的时变击穿（TDDB）特性 ，杨红，萨宁，本文利用高温工艺制备了等效氧化层厚度（EOT）小于0.9纳米的超薄HfO2高K栅介质MOS器件，研究了其时变击穿（TDDB）特性。结果显示，其TDD
关于vue和uni-app中绝对路径的使用差别详解
weixin_43989837的博客
01-17 1万+
一、在vue中，绝对路径是以@为开头的 vue文件中的引入： import { isURL } from '@/utils/validate’中的@符号是绝对路径，其所代表的路径地址是可配制的，配置这个地址的文件为build/webpack.base.conf.js文件中有如下配置 上面的配置是配置到根目录上面了 二，在uni-app中。 然后在文件中配置你需要的绝对路径地址。 ...
解决uni-app开发小程序时，CSS调用本地图片当背景时不能使用的问题
Twistedzs的博客
03-07 2849
解决uni-app开发小程序时，CSS调用本地图片当背景时不能使用的问题
uniapp图片加载不出来的解决方案
qq_44716411的博客
09-23 1万+
uniapp图片加载不出来的解决方案 //分为两种 //第一种 <image :src="require('../../static/picture')"> //使用v-bind + require //第二种 //第一种可以解决99%的问题，若有1%的没解决，可以使用background-image属性 background-image:url(../../static/picture.png); //使用图片的最好是，本地图片使用背景图，万无一失，网络图片使用image src。
uniApp引用本地矢量图文件
80岁小姑娘的博客
09-26 379
这样就可以本地只用矢量图了。
uni-app接入iconfont图标库
09-12
### 回答1： 要在uni-app中使用iconfont图标库，您需要执行以下步骤： 1. 在iconfont官网中选择您需要的图标，并且将它们添加到您的购物车中。 2. 下载您的图标包并解压到您的本地目录中。 3. 在您的uni-app项目中，将iconfont字体文件复制到您的静态资源目录中。 4. 在您的样式文件中，引用iconfont字体文件，并为图标定义样式。 5. 在您的模板文件中，使用字体图标的编码或名称添加图标。 示例代码： ``` <template> <view> <text class="iconfont icon-menu"></text> </view> </template> <style> @font-face { font-family: "iconfont"; src: url('/static/iconfont/iconfont.eot'); src: url('/static/iconfont/iconfont.eot?#iefix') format('embedded-opentype'), url('/static/iconfont/iconfont.woff2') format('woff2'), url('/static/iconfont/iconfont.woff') format('woff'), url('/static/iconfont/iconfont.ttf') format('truetype'), url('/static/iconfont/iconfont.svg#iconfont') format('svg'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-menu:before { content: "\e623"; } </style> ``` ### 回答2： 要在uni-app中接入Iconfont图标库，可以按照以下步骤进行操作： 1. 首先，登录Iconfont官网（www.iconfont.cn），注册并登录账户。 2. 在Iconfont官网上搜索需要使用的图标，选择好后添加到购物车。 3. 在购物车页面点击下载，选择uni-app项目，并选择SVG格式进行下载。 4. 下载完成后解压文件，可以看到一个包含所有图标的文件夹。 5. 在uni-app项目的static文件夹下创建一个新的文件夹，例如命名为iconfont。 6. 将解压后的图标文件夹中的字体文件（通常以.ttf或.otf为后缀）复制到刚刚创建的iconfont文件夹中。 7. 在uni-app的项目目录中找到并打开App.vue文件，将以下代码添加到style标签中： ``` @font-face { font-family: 'iconfont'; src: url('./static/iconfont/iconfont.ttf') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ``` 8. 在需要使用图标的页面中，可以使用类似以下代码的方式引用图标： ``` <text class="iconfont">&#xeXXX;</text> ``` 其中，`&#xeXXX;` 是图标对应的Unicode编码，在iconfont官网上找到对应图标的Unicode编码即可。 9. 最后，编译运行uni-app项目，就可以在页面中看到使用了Iconfont图标库的效果了。 以上就是在uni-app中接入Iconfont图标库的简单步骤。 ### 回答3： uni-app是一个跨平台开发框架，可以方便地开发出同时适用于多个平台的应用程序。在uni-app中接入iconfont图标库可以通过以下步骤完成： 1. 导入iconfont字体文件：首先，在iconfont官网上选择适合项目需要的图标，然后将图标添加到购物车中，并选择图标的格式为“symbol”，下载得到一个包含字体文件的压缩包。 2. 解压字体文件：将下载得到的压缩包解压，得到一个包含字体文件的文件夹。 3. 复制字体文件：将字体文件夹中的iconfont.ttf文件复制到uni-app项目的static目录下，这样字体文件就被放置在了静态资源目录中。 4. 导入字体文件：在uni-app项目的main.js（或者是对应平台的入口文件）中引入字体文件，可以使用以下代码导入字体文件： ``` import './static/iconfont/iconfont.css' import './static/iconfont/iconfont.ttf' ``` 5. 使用图标：现在可以在uni-app的页面代码中使用iconfont图标了。可以通过以下方式使用图标： ``` <i class="iconfont icon-图标名称"></i> ``` 其中，icon-图标名称是在iconfont官网中给图标定义的类名。 通过以上步骤，就成功地将iconfont图标库接入到uni-app项目中了。你可以根据需求选择合适的图标，并在页面中使用它们，从而增加应用的视觉效果和体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

任磊abc

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

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

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

打赏作者

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

抵扣说明：

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

余额充值