uni-app中uni-icons在nvue（vue3版本）不显示图标

uni-app中uni-icons在nvue（vue3版本）不显示图标

测试过的手机：

android12，Redmi Note9 Pro

操作步骤：

  1. 创建uniapp项目，选择vue3
  2. 使用 uni-icons
  3. 创建nvue页面，使用uni-icons

预期结果：

正常显示icon

实际结果：

icon未加载成功，显示?

bug描述：

bug描述：nvue（vue3版本）使用uni-icons，图标不显示
原因分析：nvue（vue2版本）会在www目录生成uni_modules文件夹，nvue（vue3版本）却不会

相关链接：

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Mac
PC操作系统版本 12.3.1 (21E258)
HBuilderX类型 正式
HBuilderX版本 3.4.6
手机系统 全部
手机厂商 华为
页面类型 nvue
Vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app中uni-icons在nvue（vue3版本）不显示图标的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

确认bug，已更新 ，预计下个版本更新

更多关于uni-app中uni-icons在nvue（vue3版本）不显示图标的实战教程也可以访问 https://www.itying.com/category-93-b0.html


版本：1.3.5

代码：

<template> <view class="content"> <image class="logo" src="/static/logo.png"></image> <uni-icons type="back"></uni-icons> </view> </template>

另外，nvue（vue2）正常的

回复 码农朱哲: 已确认bug

回复 DCloud_UNI_HT: 什么时候能更新呢，我升级到了3.4.7.20220422，ios端还是不显示uni-icons的图标，直接显示空白，安卓机是可以的

回复 1***@163.com: 版本还是低，需要 升级到3.4.9+ 以上 ，使用最新的 alpha 试一试

在 uni-app 中使用 uni-icons 组件时，如果在 nvue 页面中（特别是 Vue 3 版本）图标不显示，可能是由于以下几个原因导致的。以下是一些可能的解决方案：

1. 确保 uni-icons 组件已正确引入

首先，确保你已经正确引入了 uni-icons 组件。在 nvue 页面中，你需要手动引入 uni-icons 组件。

<template>
  <view>
    <uni-icons type="home" size="30" color="#000"></uni-icons>
  </view>
</template>

<script setup>
import UniIcons from '@/components/uni-icons/uni-icons.vue';
</script>

2. 检查 uni-icons 的路径

确保 uni-icons 组件的路径是正确的。如果路径错误，组件将无法加载。

3. 使用 nvue 支持的图标库

nvue 页面使用的是原生渲染，因此某些 uni-icons 可能不兼容。你可以尝试使用 nvue 支持的图标库，例如 iconfont 或者 uni-ui 中的 uni-icons 组件。

4. 检查 nvue 页面的样式

nvue 页面的样式与普通 vue 页面有所不同，某些样式可能不生效。确保你使用的样式在 nvue 中是支持的。

5. 使用 text 标签包裹图标

在 nvue 中，图标可能需要使用 text 标签包裹才能正确显示。

<template>
  <view>
    <text>
      <uni-icons type="home" size="30" color="#000"></uni-icons>
    </text>
  </view>
</template>

6. 检查 uni-icons 的版本

确保你使用的 uni-icons 版本是最新的，旧版本可能存在兼容性问题。

7. 使用 uni-ui 的 uni-icons 组件

如果你使用的是 uni-ui，可以尝试使用 uni-ui 提供的 uni-icons 组件，它可能对 nvue 有更好的支持。

<template>
  <view>
    <uni-icons type="home" size="30" color="#000"></uni-icons>
  </view>
</template>

<script setup>
import { UniIcons } from 'uni-ui';
</script>

8. 检查 nvue 页面的生命周期

nvue 页面的生命周期与 vue 页面有所不同，确保你在正确的生命周期中加载图标。

9. 使用 nvue 的原生组件

如果以上方法都无法解决问题，你可以考虑使用 nvue 的原生组件来显示图标，例如 image 组件。

<template>
  <view>
    <image src="/static/icon/home.png" style="width: 30px; height: 30px;"></image>
  </view>
</template>
回到顶部