dart - 在 Flutter 中显示本地镜像和服务器图像(带缓存)

Question

我试图在从图像库以及网络加载的图像中选取的小部件中显示图像。

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

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

请帮我展示一下。

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

提前谢谢您。

Answer 1

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

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