Flutter:网络图像缓存插件——cached_network_image

166 阅读1分钟
flutter pub add cached_network_image
import 'package:cached_network_image/cached_network_image.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

class ImageTwo extends StatefulWidget {
  const ImageTwo({super.key});

  @override
  State<ImageTwo> createState() => _ImageTwoState();
}

class _ImageTwoState extends State<ImageTwo> {
  String imageUrl = "https://img2.baidu.com/it/u=3164505078,1921720111&fm=253&fmt=auto&app=120&f=JPEG?w=371&h=371";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("网络图像缓存插CachedNeWorkImage"),
      ),
      body: Column(
        children: [
          CachedNetworkImage(
            imageUrl: imageUrl,
            // 占位符
            // CircularProgressIndicator 圆形进度条
            placeholder: (context, url) => CircularProgressIndicator(),
            // 图片加载出错
            errorWidget: (context, url, error) => Icon(Icons.error),
          ),
          CachedNetworkImage(
            imageUrl: "https://scpic.chinaz.net/files/default/imgs/2023-07-12/40fd0b90e02f7fd4.jpg",
            // 占位符
            // CircularProgressIndicator 圆形进度条
            placeholder: (context, url) => CircularProgressIndicator(),
            // 图片加载出错
            errorWidget: (context, url, error) => Text("加载出错",style: TextStyle(color: Colors.red),),
               ),
        ],
      ),
    );
  }
}

image.png

cached_network_image图片没有加载出来

cached_network_image 是一个Flutter包,用于在应用中缓存从网络加载的图片。如果你遇到 cached_network_image 图片没有加载出来的问题,可能的原因和解决方法如下:

  1. 网络权限问题

    确保你的应用已经添加了网络访问权限。在AndroidManifest.xml中应该包含以下行:

<uses-permission android:name="android.permission.INTERNET" />