Flutter本地数据库图片无法显示（HTTP 404错误）求助

1. 先确认图片实际存储的绝对路径 #

你得先搞清楚上传图片时，它到底存在设备的哪个文件夹里。比如Android的getExternalStorageDirectory()路径、iOS的applicationDocumentsDirectory路径。可以在上传成功后直接打印完整路径，方便后续对比：

final file = File('你上传时的完整路径/xxx.jpg');
print('图片实际存储路径：${file.path}');

2. 拼接正确的显示路径 #

数据库只存了文件名，必须把存储时的根路径和文件名拼起来，才能得到Flutter能识别的完整路径：

// 替换成你实际的图片根存储路径
final String imageRootPath = (await getExternalStorageDirectory())!.path;
// 从数据库拿到的带后缀的文件名
final String imageName = 'xxx.jpg';
// 拼接完整路径
final String fullImagePath = '$imageRootPath/$imageName';

// 用Image.file组件显示
Image.file(File(fullImagePath));

3. 检查文件访问权限 #

Android 13+或iOS需要提前申请对应权限，否则会读不到文件：

• Android：在AndroidManifest.xml里加权限

  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
  

• iOS：在Info.plist里加权限描述

  <key>NSPhotoLibraryAddUsageDescription</key>
  <string>需要访问相册存储图片</string>
  <key>NSPhotoLibraryUsageDescription</key>
  <string>需要访问相册读取图片</string>
  

4. 验证文件是否真的存在 #

可以用代码检查拼接后的路径有没有对应文件，避免路径写错：

final File imageFile = File(fullImagePath);
if (await imageFile.exists()) {
  // 文件存在，正常显示即可
} else {
  print('文件不存在：$fullImagePath');
  // 这里可以显示一张占位图替代
}

5. 解决Android媒体扫描问题 #

如果图片存在外部存储，Android可能不会立刻识别到新文件，需要手动触发媒体扫描：

import 'package:flutter/services.dart';

await MethodChannel('com.example.app/media_scan').invokeMethod(
  'scanFile',
  {'path': fullImagePath},
);

对应的Android原生代码（放在MainActivity里）：

MethodChannel(flutterEngine.dartExecutor.binaryMessenger, "com.example.app/media_scan").setMethodCallHandler { call, result ->
    if (call.method == "scanFile") {
        val path = call.argument<String>("path") ?: return@setMethodCallHandler result.error("INVALID_PATH", "路径为空", null)
        MediaScannerConnection.scanFile(this, arrayOf(path), null) { _, uri ->
            result.success(uri)
        }
    } else {
        result.notImplemented()
    }
}

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