uni-app uni.showToast H5端在icon设置error或success时不显示图标

uni-app uni.showToast H5端在icon设置error或success时不显示图标

示例代码：

uni.showToast({ title: '信息错误', icon: 'error', duration: 1000 });
```

## 操作步骤：

uni.showToast({ title: ‘信息错误’, icon: ‘error’, duration: 1000 }); ``

预期结果：

显示task  包含图标和文字
``

## 实际结果：

只有文字 图标处是空的 ``

bug描述：

uni.showToast H5端在icon设置error或success时不显示图标，设置loading时可以显示  
``

| 信息类别         | 详细信息             |
|------------------|----------------------|
| 产品分类         | uniapp/H5            |
| PC开发环境操作系统 | Windows              |
| PC开发环境操作系统版本号 | Windows 10 企业版 20H2 |
| HBuilderX类型    | 正式                 |
| HBuilderX版本号  | 3.2.16               |
| 浏览器平台       | Chrome               |
| 项目创建方式     | HBuilderX            |

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211210/c787c66bb8a83ced52c31e344a2bdb2d.png)

更多关于uni-app uni.showToast H5端在icon设置error或success时不显示图标的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

未复现此问题。

更多关于uni-app uni.showToast H5端在icon设置error或success时不显示图标的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我这就没显示，打包h5在手机上看也不显示。

是不是哪配置有问题

新建个空项目看下能否复现此问题？

回复 DCloud_UNI_Anne: 嗯 空项目可以，应该是我这配置的问题

在H5端，uni.showToast的icon参数确实存在兼容性问题。根据官方文档，H5平台仅支持success、loading、none三种图标类型，不支持error图标。

解决方案：

  1. 使用自定义图标（推荐）：
uni.showToast({
  title: '信息错误',
  icon: 'none',
  image: '/static/error.png', // 自定义错误图标路径
  duration: 1000
});
  1. 使用uni.showModal替代： 对于错误提示，考虑使用对话框形式：
uni.showModal({
  title: '提示',
  content: '信息错误',
  showCancel: false
});
  1. 平台条件编译：
// #ifdef H5
uni.showToast({
  title: '信息错误',
  icon: 'none',
  duration: 1000
});
// #endif

// #ifndef H5
uni.showToast({
  title: '信息错误',
  icon: 'error',
  duration: 1000
});
// #endif
回到顶部