uni-app HX升级到3.4.6.20220420后APP端(NVUE) uni-icon图标不显示问题

uni-app HX升级到3.4.6.20220420后APP端(NVUE) uni-icon图标不显示问题

开发环境 版本号 项目创建方式
Windows HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：windows10

HBuilderX类型：正式

HBuilderX版本号：3.4.6

手机系统：Android

手机系统版本号：Android 9.0

手机厂商：小米

手机机型：MIX2

页面类型：nvue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：

```html
<uni-easyinput v-model="FormData.phone"  
type="number"  
class="fq-box--form__input-prefixiconstyles"  
styles="InputStyles"
inputBorder="false"
prefixIcon="phone"  
prefixIconStyles="PrefixIconStyles"
placeholder="请输入手机号"  
placeholderStyle="PlaceholderStyle"
clearable="true" />

<uni-icons [@click](/user/click)="SetNavButtonTitle('weixin')" type="weixin" size="36"
color="#ffffff"
style="background-color: transparent;">
</uni-icons>

操作步骤：

  • 使用一个uni-icon的基础用法即可复现

预期结果：

  • 图标显示

实际结果：

  • 图标不显示

bug描述：

【报Bug】HX升级到3.4.6.20220420后APP端(NVUE) uni-icon图标就不显示了，表现为一个文字为nograph的黑底块，只要与图标相关的，如uni-input的前缀图标也不显示， 其他端正常；在3.3.13.20220314版本时都是可以显示的


更多关于uni-app HX升级到3.4.6.20220420后APP端(NVUE) uni-icon图标不显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

已加分，感谢反馈！查看相关问题：https://ask.dcloud.net.cn/question/143510

更多关于uni-app HX升级到3.4.6.20220420后APP端(NVUE) uni-icon图标不显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


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

在 uni-app 中，升级到 HBuilderX 3.4.6.20220420 后，如果遇到 NVUE 页面中 uni-icon 图标不显示的问题，可能是由于以下原因导致的。以下是一些可能的解决方案：

1. 检查 uni-icon 的引入方式

确保你正确引入了 uni-icon 组件。在 NVUE 页面中，uni-icon 的使用方式与 Vue 页面略有不同。你需要确保在 nvue 页面中正确引入和使用 uni-icon。

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

<script>
import uniIcon from '@/components/uni-icon/uni-icon.vue';

export default {
  components: {
    uniIcon
  }
}
</script>

2. 检查 uni-icon 的路径

确保 uni-icon 组件的路径是正确的。如果路径错误，图标将无法显示。

3. 检查 uni-icon 的版本

确保你使用的 uni-icon 版本与 HBuilderX 3.4.6.20220420 兼容。如果 uni-icon 版本过旧，可能会导致图标不显示的问题。你可以尝试更新 uni-icon 到最新版本。

4. 检查 NVUE 页面的样式

NVUE 页面的样式与 Vue 页面有所不同，某些样式在 NVUE 页面中可能不生效。确保你没有使用 NVUE 不支持的样式属性。

5. 检查 HBuilderX 的配置

有时 HBuilderX 的配置可能会导致某些组件无法正常显示。你可以尝试以下操作：

  • 清理项目缓存：点击菜单栏的 项目 -> 清理项目缓存。
  • 重新编译项目：点击菜单栏的 运行 -> 运行到手机或模拟器。

6. 检查字体文件

uni-icon 使用的是字体图标，确保字体文件正确加载。如果字体文件未正确加载，图标将无法显示。你可以检查网络请求，确保字体文件被正确加载。

7. 检查 NVUE 页面的兼容性

NVUE 页面在某些情况下可能存在兼容性问题。你可以尝试在 Vue 页面中使用 uni-icon，看看是否能够正常显示。如果 Vue 页面中图标显示正常，而 NVUE 页面中不显示，可能是 NVUE 页面的兼容性问题。

8. 使用原生图标

如果 uni-icon 在 NVUE 页面中无法正常显示，你可以考虑使用原生图标组件，例如 image 组件来显示图标。

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