首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter CachedNetworkImageProvider -如何在出错时显示本地默认图像?

Flutter CachedNetworkImageProvider是一个用于加载网络图片并进行缓存的库。当网络图片加载出错时,我们可以使用默认的本地图片来替代显示。

为了在出错时显示本地默认图像,我们可以通过使用errorWidget属性来设置默认图像。

下面是一个示例代码,展示了如何使用CachedNetworkImageProvider加载网络图片,并在出错时显示本地默认图像:

代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CachedNetworkImage(
      imageUrl: 'https://example.com/image.jpg',
      placeholder: (context, url) => CircularProgressIndicator(),
      errorWidget: (context, url, error) => Image.asset('assets/default_image.png'),
    );
  }
}

在这个示例中,我们使用了CachedNetworkImage来加载网络图片。imageUrl参数指定了要加载的图片的URL。placeholder参数指定了在加载过程中显示的占位符,这里使用了一个圆形进度条作为占位符。errorWidget参数指定了在图片加载出错时显示的小部件,这里使用了本地默认图像default_image.png

通过使用这些属性,我们可以在网络图片加载出错时显示本地默认图像,提供更好的用户体验。

腾讯云提供了多个与图片相关的服务,例如云对象存储 COS(https://cloud.tencent.com/product/cos),可以用于存储和管理图片文件;腾讯云图片处理服务(https://cloud.tencent.com/product/img),可以对图片进行裁剪、缩放、水印等处理。这些服务可以与Flutter的CachedNetworkImageProvider库结合使用,为开发者提供完整的图片解决方案。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 构建完整应用手册-图片 顶

显示来自互联网的图像 显示图像是大多数移动应用程序的基础。 Flutter提供Image小部件以显示不同类型的图像。 为了处理来自URL的图像,请使用Image.network构造函数。...raw=true', ); 占位符和缓存 默认的Image.network构造函数不能处理更多的高级功能,例如在下载后将图像加载或缓存到设备后淡入图像。...用占位符淡入图像 使用默认images小部件显示图像,您可能会注意到它们加载时会弹出到屏幕上。 这可能会让用户产生视觉震撼。...使用缓存的图像 某些情况下,在从网络上下载图像缓存图像可能会很方便,以便它们可以脱机使用。 为此,我们将使用cached_network_image包。...在这个例子中,我们将在图片加载显示一个蜘蛛。

1.2K20
  • flutter中的包管理与资源管理

    我们可以Pub上面查找我们需要的包和插件,也可以向Pub发布我们的包和插件。我们将在后面的章节中介绍如何向Pub发布我们的包和插件。 示例 接下来,我们实现一个显示随机字符串的widget。...Asset 变体(variant) 构建过程支持“asset变体”的概念:不同版本的asset可能会显示不同的上下文中。...选择匹配当前设备分辨率的图片时,Flutter会使用到asset变体(见下文),将来,Flutter可能会将这种机制扩展到本地化、阅读提示等方面。...这种方法不是使用应用程序构建的默认asset bundle,而是使父级widget在运行时动态替换的不同的AssetBundle,这对于本地化或测试场景很有用。...其中M和N是数字标识符,对应于其中包含的图像的分辨率,也就是说,它们指定不同设备像素比例的图片。 主资源默认对应于1.0倍的分辨率图片。

    2.5K10

    带你快速掌握Flutter图片开发核心技能

    如何加载网络图片? 如何加载静态图片? 如何加载本地图片? 如何设置Placeholder如何配置图片缓存? 如何加载Icon? 什么是Image widget?...Image.network - 从网络URL中获取图片; new Image.file - 从本地文件中获取图片; new Image.memory - 用于从Uint8List获取图像加载项目中的图片资源...要加载项目中的静态图片,需要一些两步: pubspec.yaml 文件中声明图片资源的路径; 使用AssetImage访问图片; 我们《快速上手Flutter开发》的《项目结构、资源、依赖和本地化...如何配置图片缓存? Flutter中我们可以借助cached_network_image插件,来从网络上加载图片,并且将其缓存到本地,以供下次使用。...从Icon的构造方法可以很清楚的看出Icon构造方法需要一个默认的类型为IconData类型的参数,我们可以构造一个自己的IconData,也可以使用Flutter提供的material_fonts。

    1.5K10

    flutter 起步

    安装完成后-需要安装as(Android studio)运行 flutter doctor 检查环境缺失的依赖图片根据错误提示安装相对应依赖与工具如何引用并安装第三方库pubspec.yaml管理第三方库...^3.1.0拉取声明的第三方库到本地工程flutter packages get总结:pubspec.yaml声明需要引用的库,执行命令flutter packages get进行拉取即可使用。...true应用程序顶部覆盖一层GPU和UI曲线图,可即时查看当前流畅度情况19. checkerboardRasterCacheImages当为true,打开光栅缓存图像的棋盘格20. checkerboardOffscreenLayers...当为truedebug模式下显示右上角的debug字样的横幅,false即为不显示Scaffold 有下面几个主要属性:appBar - 显示界面顶部的一个 AppBar。...默认值为 true。AppBar 有以下常用属性:leading → Widget - 标题前面显示的一个控件,首页通常显示应用的 logo;在其他界面通常显示为返回按钮。

    4.5K20

    Flutter | 和小老弟一起学资源管理

    如何指定assets Flutter使用 pusbspec.yaml 来管理程序所需资源,对于每一个资源文件,都需要在 pushspec 中声明,否则调用时就会出现找不到资源文件的报错。...选择匹配当前设备分辨率的图片是,Flutter 会使用 asset 变体,以后,可能会将这种机制扩展到本地化,阅读提示等方面。...加载图片 不同的分辨率设备上,AssetImage 可以选择不同分辨率的图片进行显示,但为了让 Flutter 能知道如何去寻找,对于图片的位置,必须按照特定的目录结构,如下: .....注意:如果未在 Image widget上指定渲染图像的宽高和宽度,那么 Image widget将占用与主资源相同的屏幕空间大小,比如主资源也就是默认的 icon.png大小是 100 x 100px.../images/3.0x/icon.png 我们加载图像,就要使用如下两种方式(显示声明package): AssetImage("images/icon.png",package:"test_icons

    1K10

    【老孟FlutterFlutter 2 新增的功能

    此版本包括一个更新的Scrollbar小部件,该小部件桌面环境中非常有效 滚动条小部件已更新,以提供桌面上预期的交互功能,包括拖动拇指,单击轨道以上下滚动页面以及鼠标悬停在鼠标的任何部分上显示轨道的功能...,以及能够SnackBars完成显示SnackBars的能力。...要启用此功能,请在Flutter Inspector中启用“反转超大图像”。 图片发布 启用“反转超大图像”选项,以突出显示比需要放大的图像大的图像。...现在,当您显示分辨率明显大于其显示尺寸的图像,该图像将上下颠倒显示,以便在您的应用中轻松查找。...图片发布 实际应用中的“反转超大图像”选项 此外,根据大众的需求,除了Flutter Inspector的“布局资源管理器”中显示有关灵活布局的详细信息外,我们还添加了显示固定布局的功能,使您能够调试各种布局

    7.8K20

    Flutter 3更新详解

    macOS 平台默认使用通用二进制文件 Flutter 3 中,Flutter macOS 桌面应用会被构建为通用二进制文件,从而原生支持使用 Intel 处理器的 Mac 电脑和搭载 Apple...这个新 API 使用浏览器内置的图像编解码器主线程之外异步解码图像。这使得图像解码速度提高 2 倍,而且完全不会阻塞主线程,消除了所有之前由图像引起的卡顿现象。... Flutter 应用之前显示的纯 HTML 交互式加载页。 请阅读官方文档 “自定义 web 应用初始化” 了解详细信息。...我们的本地测试中,此功能在 Pixel 4XL 设备上将依照 backdrop_filter_perf 基准测试的帧栅格化时间的平均值、90 百分位值和 99 百分位值缩减了 5 倍。...这意味着 Flutter 的光栅线程无需等待 Android 视图渲染。现在,Flutter 引擎使用它管理的 OpenGL 纹理将视图显示屏幕上。

    3.5K20

    Flutter的文本、图片和按钮使用

    color: Colors.red),//20号红色粗体展示 ); 运行效果如下图所示: 一段字符串中支持多种混合展示样式 与单一样式的关键区别在于分片,即如何把一段字符串分为几个片段,给每个片段单独设置样式...图片显示方式很多,如资源图片、网络图片、文件图片等,图片格式各不相同,Flutter也有多种方式加载不同形式、支持不同格式图片: 加载本地资源图片,如Image.asset(‘images/logo.png...FadeInImage控件提供图片占位功能,并支持图片加载完成淡入淡出视觉效果。由于Image支持gif格式,还可将一些炫酷加载动画作占位图。...这就对应按钮控件中的两个最重要参数: onPressed参数用于设置点击回调,告诉Flutter在按钮被点击通知我们。...阅读Flutter SDK中Text、Image、FadeInImage、FloatingActionButton、FlatButton和RaisedButton的源码,可以发现它们的build函数中都有一个内部真正承载其视觉功能的控件

    55320

    第131期:flutter中的资源和图片

    资源变体 应用的构建过程支持资源变体的概念:即,不同版本的资源有可能显示不同的上下文之中。...当我们pubspec.yaml的assets部分中指定资源的路径,构建过程会在相邻子目录中查找任何同名文件。然后,这些文件与指定的资源一起包含在asset bundle(资源包)中。...这种方法允许父组件在运行时替换不同的AssetBundle,对于本地化或测试场景非常有用。...其中M和N是数字标识符,对应于其中包含的图像的标称分辨率。换句话说,它们指定了图像的设备像素比。 主要资源默认对应1.0的分辨率。例如,名为my_icon.png的图像: ......设备像素比率为2.7的设备上,.../3.0x/my_icon.png这个图像将会被加载。

    1.4K20

    Flutter 2.8 的新特性【flutter专题17】

    例如在 Android 上渲染第一帧之前,Flutter 现在 只通知 Dart VM TRIM_LEVEL_RUNNING_CRITICAL 及以上的内存压力信号,本地测试中,这个更改将低端设备上的第一帧时间减少了多达...另外,以前设置默认字体管理器,会在设置第一个 Dart isolate 添加人为的延迟,而延迟默认字体管理器 和 Dart Isolate 设置,这样既改善了启动延迟,又使上述优化的效果更加明显。..., Flutter 开发人员进行性能跟踪遇到了问题。...Profiling 以便更好地了解应用程序中的性能问题,应用程序启动启用,2.8 版本现在会将跟踪事件发送到 Android systrace 记录器,即使 Flutter 应用程序构建在发布模式下也会发送这些事件...如果开发者使用的是 google_maps_flutter 插件或 video_player 插件的 web 版本,或者你已经遵循了 Flutter 团队关于如何优化网络上显示图像的建议,那么您其实已经使用

    2.4K10

    Flutter依赖库填坑

    本地dart-lang版本是2.17.6。...编译工程时候出现了Analyzer5.3.0 Crash异常 分析原因:dart-lang build_runner之前默认会做代码检测任务(依赖analyzer),analyzer在这个时候升级到高版本导致...,解决办法: 升级本地flutter sdk 强制指定一个固定旧的analyzer版本 问题解决 工程pubspec.yaml文件中使用dependency_overrides指定固定版本,...比如上述问题2可以如下处理 dependency_overrides: analyzer: 5.2.0 一点想法 默认Flutter使用三方库时候,我们都会这样写,带上^ 如下: analyzer:...^5.2.0 但是很多时候,本地工程的flutter sdk版本,宿主版本中的jar包注定Flutter中三方库版本只能苟一个低版本,无法更新,一更新就出错

    72130

    【译】Flutter beta 2 Now

    VS Code获得了对运行测试,多项目支持和一个新选择器的支持,以安装多个选择当前的Flutter SDK。 改进的资源系统 我们已经对我们的资产系统进行了相当重要的优化。...因为我们将资源作为基础平台所期望的,因此可以Flutter本地平台之间共享。...我们的测试显示Dart 2接近完成,并且非常稳定。Flutter的第二个测试版默认启用Dart 2。结果你会看到更快的异步调用,以及更丰富的类型系统。...Flutter beta 1中,启动不会出现错误,只有当用户点击该按钮后,才会通知字符串不能用作小部件: 通过Dart 2中新的完整运行时检查,我们可以避免像这样的“等待发生的错误”,而不是提前失败...,即在代码对泛型类型提出错误要求的时候。

    2.3K30

    Flutter lesson 6: Flutter组件之基础组件(二)

    取值的话也是前端中对其方式的几种取值 start end center spaceBetween spaceAround spaceEvenly 唯一不同的是,Flutter中新增加了一个spaceEvenly...,并不是图片的宽度,默认图片的宽度 this.height, // 用来指定显示图片区域的高,并不是图片的高度,默认图片的高度 this.color, // 图片颜色,这个可以直接修改图片的颜色...但是我们无法设置网络图片加载出错显示的图片,这里可是使用第三方的工具cached_network_image new CachedNetworkImage( width: 120, fit:...一般会和colorBlendMode配合使用 colorBlendMode 用于将color与此图像组合。 默认为BlendMode.srcIn。...fit 图片如何在Image控件中显示,有以下几个值可选 enum BoxFit { fill, // 填充整个容器,宽高都不超出容器 contain, // 按宽高中最小的那个来放大

    2.1K20

    ——Flutter与其他方案的区别

    这需要从图像显示的基本原理说起。计算机系统中,图像显示需要CPU、GPU和显示器一起配合完成:CPU负责图像数据计算,GPU负责图像数据渲染,而显示器则负责最终图像显示。...CPU把计算好的、需要显示的内容交给GPU,由GPU完成渲染后放入帧缓冲区,随后视频控制器根据垂直同步信号(VSync)以每秒60次的速度,从帧缓冲区读取帧数据交由显示器完成图像显示。...操作系统呈现图像遵循这种机制,而Flutter作为跨平台开发框架也采用这种底层方案。 Flutter绘制原理。...因为,Flutter只关心如何向GPU提供视图数据,而Skia就是它向GPU提供视图数据的好帮手。 Skia是C++开发、性能彪悍2D图像绘制引擎,其前身是一个向量绘图软件。...开发期使用JIT,开发周期异常短,调试方式颠覆常规(支持有状态的热重载);而发布期使用AOT,本地代码的执行更高效,代码性能和用户体验也更卓越。

    48120

    Flutter中更快地加载您的图像资源

    本文主要介绍Flutter中更快地加载您的图像资源 我们可以将图像放在我们的资产文件夹中,但如何更快地加载它们?...这是 Flutter 中的一个秘密函数,可以帮助我们做到这一点 — precacheImage() 很多时候(尤其是 Flutter Web 中),您的本地资源图像需要花费大量时间屏幕上加载和渲染...对于用户的角度来看E本是不好秒 pecially如果图像是屏幕的背景图像。如果图像是您屏幕中的任何组件,我们仍然可以显示微光或其他内容,以便用户知道该图像正在加载。但是我们不能对背景图像显示微光!...我们 Flutter 中有一个简单而有用的方法,我们可以用它来更快地加载我们的资产图像——precacheImage()!...由于在此需要上下文,因此我们可以可访问上下文的任何函数中添加 precacheImage()。我们可以将相同的内容放在第一个屏幕的didChangeDependencies()方法中!

    3K20

    vscode开发插件推荐第二节

    如何安装扩展? 首先快速回顾一下如何安装扩展。 VS Code 中,单击左侧的扩展,然后搜索扩展并单击安装。...flutter开发VScode插件推荐 Image preview 这是一个非常酷的扩展,它在悬停和装订线显示图像预览,当您处理大量图像可以派上用场。...这有助于我们避免图像路径或名称方面犯任何错误。如果您将鼠标悬停在 path 上,扩展名会提供指向项目结构及其维度中的文件的链接。...Material Icon Theme Material Theme Icons 用于向看起来有吸引力的文件夹显示有吸引力的图标主题。它还可以更轻松地识别文件和文件夹。 “如何使用它?...” 启动命令面板(默认情况下,Ctrl+Shift+P Windows 上,⌘+Shift+P Mac 上)并键入Material Icons,选择Activate Icon Theme。

    1.7K10

    Flutter中构建布局 顶

    Flutter的布局机制如何工作。 如何垂直和水平布局小部件。 如何构建一个Flutter布局。 这是Flutter中构建布局的指南。 您将构建以下屏幕截图的布局: ?...然后本指南回过头来解释Flutter的布局方法,并说明如何在屏幕上放置一个小部件。 讨论如何水平和垂直放置小部件之后,会介绍一些最常见的布局小部件。...如何Flutter中布置单个小部件? 本节介绍如何创建一个简单的小部件并将其显示屏幕上。 它还显示了一个简单的Hello World应用程序的完整代码。...注意:将图像添加到项目中,需要更新pubspec文件才能访问它们 - 此示例使用Image.asset来显示图像。...处理Flutter中的盒子约束:讨论小部件如何受其渲染框限制。 Flutter中添加资产和图像:说明如何图像和其他资源添加到应用程序包中。

    43.1K10

    文本、图片和按钮Flutter中怎么用

    文本控件 Flutter中,Text支持两种类型的文本展示,一个是默认的展示单一样式的文本 Text,另一个是支持多种混合样式的富文本 Text.rich。...图片的显示方式有很多,比如资源图片、网络图片、文件图片等,图片格式也各不相同,因此Flutter中,也有多种方式用来加载不同形式、支持不同格式的图片: 加载本地资源图片,如: Image.asset...FadeInImage控件提供了图片占位的功能,并且支持图片加载完成淡入淡出的视觉效果。此外,由于Image支持gif格式,我们甚至还可以将一些炫酷的加载动画作为占位图。...在下面的代码中,我们加载图片时,不仅给用户展示了作为占位的转圈loading,还提供了一个错误图兜底,以备图片加载出错: CachedNetworkImage( imageUrl:...下面代码中,我分别定义了FloatingActionButton、FlatButton和RaisedButton,它们的功能完全一样,点击打印一段文字: FloatingActionButton(

    7.7K20
    领券