在 Flutter 中显示本地图像和服务器图像（带缓存）答案

【问题标题】：Show Local Images and Server Images ( with Caching) in Flutter在 Flutter 中显示本地图像和服务器图像（带缓存）
【发布时间】：2019-09-16 01:04:29
【问题描述】：

我正在尝试在从 Image-Gallery 以及从网络加载的图像中挑选的 Widget 中显示图像。

CachedNetworkImage 与网络图像一起工作正常，但是当我尝试从图库中传递选定的图像时，它不起作用。

CachedNetworkImage(
      imageUrl: url,
      placeholder: (context, url) => new CircularProgressIndicator(),
      errorWidget: (context, url, error) => new Icon(Icons.error),
    );

请帮我展示一下。

目标是 1.可以加载本地图片 2.可以加载网络图片 3.可以显示缓存的图片。

提前谢谢你。

【问题讨论】：

您是否不能跟踪您是否有指向本地文件路径的 URL 或字符串并相应地使用 CachedNetworkImage 或 FileImage？
我已经尝试过了，但这对我不起作用。你有这个的代码sn-p吗？
如果您找到解决方案，请在此处发布！

标签： dart flutter image-caching flutter-image

【解决方案1】：

您需要确定何时显示本地图像以及何时显示来自网络的图像。如果网络映像需要在下载后显示本地副本，您可以添加一个检查器，如果该映像文件存在于本地。否则，应该从网络/缓存中获取图像。您可以使用图片 URL 的 imageId 作为本地图片的相同标识符。

var imgUrlEndpoint = 'https://picsum.photos/250?image='
var imgId = '9';
var imgFile = File('path/to/file/$imgId.jpg');

// Check if image file exists
if(imgFile.exists()){
  // Load image from storage
  Image.file(imgFile);
} else {
  // Load image from network
  CachedNetworkImage(
    imageUrl: '$imgUrlEndpoint$imgId',
    placeholder: (context, url) => CircularProgressIndicator(),
  );
}

【讨论】：