无法从Laravel API向Flutter应用获取图片问题求助

从Laravel API获取图片URL后，直接在浏览器中访问这些URL可正常加载图片，但在Flutter应用中获取图片时，抛出ClientException: Failed to fetch错误。

Laravel API 获取图片的函数 #

public function getFolderImages($folderId)
{
    $userTable = UserTable::findOrFail($folderId);
    $folderPath = 'public/' . $userTable->folder_url; 

    if (!Storage::exists($folderPath)) {
        return response()->json(['error' => 'Folder not found'], 404);
    }

    $files = Storage::files($folderPath);
    $imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'svg'];
    $imageUrls = [];

    foreach ($files as $file) {
        $extension = pathinfo($file, PATHINFO_EXTENSION);
        if (in_array(strtolower($extension), $imageExtensions)) {
            $imageUrls[] = asset(str_replace('public/', 'storage/', $file));
        }
    }

    return response()->json([
        'folder_name' => $userTable->folder_name,
        'image_urls' => $imageUrls,
    ]);
}

API响应示例 #

{
  "folder_name": "seru",
  "image_urls": [
    "/storage/users/3/seru/1739289930_9758765.png",
    "/storage/users/3/seru/1739289930_photo_2024-11-03_12-46-56.jpg",
    "/storage/users/3/seru/1739293073_9758765.png",
    "/storage/users/3/seru/1739293073_photo_2024-11-03_12-46-56.jpg",
    "/storage/users/3/seru/1739294157_9758765.png",
    "/storage/users/3/seru/1739294157_photo_2024-11-03_12-46-56.jpg"
  ]
}

Flutter 获取图片的方法 #

void getImages() async {
  try {
    // Fetch data from API
    Map<String, dynamic> jsonData =
        await networkUtility.get("folderImages/${widget.folderId}");

    // Extract image URLs
    List<String> imageUrls = List<String>.from(jsonData['image_urls'] ?? []);

    List<Uint8List> fetchedImages = [];

    if (imageUrls.isEmpty) {
      print("No images to load.");
      return;
    }

    for (String relativePath in imageUrls) {
      try {
        String fullUrl = "http://localhost" + relativePath.replaceAll(r'\/', '/');

        var file = await DefaultCacheManager().getSingleFile(fullUrl);

        if (file.existsSync()) {
          fetchedImages.add(await file.readAsBytes());
        } else {
          print("Failed to load and cache image: $fullUrl");
        }
      } catch (e) {
        print("Error fetching and caching image from $relativePath: $e");
      }
    }

    setState(() {
      images = fetchedImages;
    });
  } catch (e) {
    print("Get images error: $e");
  }
}

出现的错误 #

Flutter中获取图片时抛出：ClientException: Failed to fetch, uri=http://myOriginalIP/storage/users/6/Seru/1739294258_aa.jpg

解决方向 #

1. URL地址与路径校验

   • 真机运行Flutter时，http://localhost无法指向本地Laravel服务，需替换为电脑局域网IP（如http://192.168.x.x），且确保设备与电脑在同一局域网。
   • 检查路径大小写：Linux环境下Laravel服务器路径区分大小写，错误中的/Seru/与响应示例的/seru/不匹配，可能导致文件找不到。

2. CORS跨域配置

   • Laravel端需配置CORS，允许Flutter应用的IP/域名访问。可使用barryvdh/laravel-cors包，在config/cors.php中设置允许的origins、methods（需包含GET/HEAD）。

3. HTTP/HTTPS协议兼容

   • 若Laravel用HTTPS，Flutter需同步使用HTTPS；若用HTTP，Android需在AndroidManifest.xml中添加android:usesCleartextTraffic="true"，iOS需在Info.plist中配置ATS允许HTTP请求。

4. 缓存库排查

   • 暂时替换DefaultCacheManager为http包直接请求，确认是否为缓存库问题：

     final response = await http.get(Uri.parse(fullUrl));
     if (response.statusCode == 200) {
       fetchedImages.add(response.bodyBytes);
     } else {
       print("Image request failed with status: ${response.statusCode}");
     }
     

5. Laravel Storage链接确认

   • 确保已执行php artisan storage:link，将storage/app/public链接到public/storage（浏览器能访问则此步骤大概率没问题）。

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