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

Question

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

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

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

请帮我展示一下。

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

先感谢您。

Answer 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(),
  );
}