Flutter中如何从本地存储加载图片至ByteData？

你用NetworkAssetBundle加载本地文件报错是因为它仅适用于HTTP/HTTPS等网络协议的URI，本地文件的file:// URI并不在它的处理范围内，所以会出现"未找到主机"的错误。下面是几种可行的本地图片加载方案：

方法1：直接使用Image.file组件 #

这是最简洁的方式，直接传入本地文件对象即可：

import 'dart:io';
import 'package:flutter/material.dart';

Widget localImageWidget() {
  // 替换为你的本地文件实际路径
  final imageFile = File('/storage/emulated/0/Pictures/photo.jpg');
  
  return Image.file(
    imageFile,
    width: 250,
    height: 250,
    fit: BoxFit.cover,
    // 加载失败时显示错误图标
    errorBuilder: (context, error, stackTrace) => const Icon(Icons.error, color: Colors.red),
  );
}

方法2：使用FileImage作为ImageProvider #

如果需要自定义ImageProvider（比如和缓存策略结合），可以用FileImage：

import 'dart:io';
import 'package:flutter/material.dart';

Widget localImageWithFileImage() {
  final imageFile = File('/storage/emulated/0/Pictures/photo.jpg');
  
  return Image(
    image: FileImage(imageFile),
    width: 250,
    height: 250,
    fit: BoxFit.cover,
  );
}

方法3：读取文件字节后用MemoryImage加载 #

适合需要对图片字节数据做预处理（如压缩、解密）的场景：

import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';

Future<Widget> localImageFromBytes() async {
  final imageFile = File('/storage/emulated/0/Pictures/photo.jpg');
  final imageBytes = await imageFile.readAsBytes();
  
  return Image.memory(
    imageBytes,
    width: 250,
    height: 250,
    fit: BoxFit.cover,
  );
}

// 使用时通过FutureBuilder处理异步加载
Widget build(BuildContext context) {
  return FutureBuilder<Widget>(
    future: localImageFromBytes(),
    builder: (context, snapshot) {
      if (snapshot.hasData) return snapshot.data!;
      if (snapshot.hasError) return const Icon(Icons.error);
      return const CircularProgressIndicator();
    },
  );
}

注意事项 #

• 权限配置：Android需在AndroidManifest.xml添加文件读取权限，Android 13+可使用更细粒度的媒体权限：

  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <!-- Android 13+ 替代上面的权限 -->
  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  

  iOS需在Info.plist中添加相册访问权限描述：

  <key>NSPhotoLibraryUsageDescription</key>
  <string>需要访问相册加载图片</string>
  

• 路径正确性：确保传入的文件路径是真实存在的，可通过imageFile.exists()先判断文件是否存在。

内容的提问来源于stack exchange，提问作者jdevp2