uni-app uni-easyinput 图标不显示

uni-app uni-easyinput 图标不显示

开发环境 版本号 项目创建方式
Windows 1 CLI
1.03
2.14.4
CLI
4.5.0

bug描述：

<uni-easyinput prefixIcon=“search” v-model=“value” @input=“input”></uni-easyinput>
图标不显示，
npm引入的
直接引用图标组件可以显示图标
<uni-icons class="icon" type="locked" size="24" />


更多关于uni-app uni-easyinput 图标不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uni-easyinput 图标不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


uni-easyinput 的 prefixIcon 属性依赖 uni-icons 组件。图标不显示，通常由以下原因导致：

  1. 未正确引入 uni-icons 组件
    即使 uni-easyinput 已引入，也必须单独引入 uni-icons 组件库。
    请检查 pages.json 的 easycom 配置或确认是否通过 import 方式正确引入了 uni-icons。

  2. 图标名称不匹配
    prefixIcon 的值应为 uni-icons 支持的图标类型（如 search、locked）。
    请确认 search 图标在 uni-icons 中是否存在。若使用自定义图标，需通过插槽实现。

  3. 样式冲突或路径问题
    检查控制台是否有 404 错误，可能是图标字体文件未正确加载。
    若为自定义图标，需确保图标路径正确且文件存在。

解决方案：

  • 在 pages.json 中添加 uni-icons 的 easycom 规则（如使用 HBuilderX 创建的项目通常已自动配置）：
    "easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "@/components/uni-$1/uni-$1.vue"
  }
}
  • 若通过 npm 引入，请确保 uni-icons 已安装：
    npm install [@dcloudio](/user/dcloudio)/uni-ui
回到顶部