首页 > 解决方案 > 我在使用 Flutter 时遇到 CachedNetworkImageProvider 问题

问题描述

我已经为此工作了几个小时,并且查看了一堆似乎与我相似的问题。我发现很多“修复”有点过时,并且对更新版本的颤振无效。我目前使用的是 1.17.2,并且正在使用 cached_network_image ^2.2.0+1。

因此,如果还没有照片,我会尝试使用通用占位符显示用户个人资料照片,或者我正在从 Firebase 中提取保存照片(如果他们有的话)。

这是代码片段

_buildUserTile(User user) {
    return ListTile(
      leading: CircleAvatar(
        radius: 20.0,
        backgroundImage: user.profileImageUrl == null
            ? AssetImage('assets/images/user_placeholder.png')
            : CachedNetworkImageProvider(user.profileImageUrl),
      ),
      title: Text(user.name),
      onTap: () => Navigator.push(
        context,
        MaterialPageRoute(
          builder: (_) => ProfileScreen(
            currentUserId: Provider.of<UserData>(context).currentUserId,
            userId: user.id,
          ),
        ),
      ),
    );
  }

因此,当我运行程序时,它会将圆圈头像显示为蓝色圆圈,这是我遇到的错误...

════════ 图像资源服务捕获的异常════════════════════════════解析图像时抛出了以下ArgumentError编解码器:无效参数:URI 中未指定主机

抛出异常时,这是堆栈

  _HttpClient._openUrl  (dart:_http/http_impl.dart:2282:9)
  _HttpClient.openUrl  (dart:_http/http_impl.dart:2200:7)
  IOClient.send 
  package:http/src/io_client.dart:33
  HttpFileService.get 
  package:flutter_cache_manager/…/web/file_service.dart:32
  WebHelper._download 
  package:flutter_cache_manager/…/web/web_helper.dart:76

  Image provider: CachedNetworkImageProvider("", scale: 1.0) 
  Image key: CachedNetworkImageProvider("", scale: 1.0): CachedNetworkImageProvider("", scale: 1.0)

- 对不起丑陋的格式

所以它说在URI中没有指定主机。我不确定我做错了什么,我不确定如何解决这个问题。我对扑腾很陌生。帮助将不胜感激。谢谢!如果需要更多细节,请告诉我。

标签: flutterdart

解决方案


您似乎收到了该错误,因为您的链接是空白的。如果要在链接为空白时显示资产图像user.profileImageUrl.isEmpty。下面的代码:

_buildUserTile(User user) {
    return ListTile(
      leading: CircleAvatar(
        radius: 20.0,
        backgroundImage: user.profileImageUrl == null || user.profileImageUrl.isEmpty
            ? AssetImage('assets/images/user_placeholder.png')
            : CachedNetworkImageProvider(user.profileImageUrl),
      ),
      title: Text(user.name),
      onTap: () => Navigator.push(
        context,
        MaterialPageRoute(
          builder: (_) => ProfileScreen(
            currentUserId: Provider.of<UserData>(context).currentUserId,
            userId: user.id,
          ),
        ),
      ),
    );
  }

推荐阅读