Flutter无法从Laravel API加载图片问题求助

Laravel控制器代码 #

以下是用于上传带图片数据的函数：

public function addTrademark(Request $request){ 
    $Trademark = Trademark::where('name',$request->name)->first(); 
    if($Trademark!=null) 
    { 
      return response()->json(['message' => 'trademark already Exists']); 
    } 
   
    if($request->hasFile('image')){// 选择请求中的图片 
      $filename=rand(10000,1000000).$request->image->getClientOriginalName();// 为图片名称添加随机数 
      $request->image->storeAs('images',$filename,'public'); // 将图片存储到服务器public/images目录 

      //Storage::disk('public')->put($path .'/'. $filename, base64_decode($image)); 
      //Storage::disk($path)->put($filename, base64_decode($image)); 

      $trademark=Trademark::create([ 
        'name'=>$request->name, 
        'image'=>$filename, 
       'cretificate'=>$request->cretificate, 
       'description'=>$request->description, 
       'trader_id'=>$request->trader_id, 
       'added_at'=>$request->added_at, 
       'Expired_at'=>$request->expired_at, 
       'is_active'=>1]); 
       return response()->json(['message' => 'success']); 
      } 
      else{ 
        return response()->json(['message' => 'image is empty']); 
      } 
}

API返回JSON数据 #

{ 
  "data": { 
    "current_page": 1, 
    "data": [ 
      { 
        "id": 37, 
        "name": "jjjhhhhg", 
        "phone": "778405470", 
        "email": "kalid123@gmail.com", 
        "address": "حدة", 
        "nationality": "يمني", 
        "created_at": "2023-03-12T06:35:12.000000Z", 
        "updated_at": "2023-03-12T06:35:12.000000Z", 
        "image": "404782image_picker1739157224851247651.jpg", 
        "cretificate": "https://jjhfss.com", 
        "description": "errrrttt", 
        "trader_id": 1, 
        "added_at": "2023-03-12", 
        "Expired_at": "2024-03-12", 
        "is_active": 1, 
        "trader_name": "خالد جلب" 
      }]}} 

Flutter端问题详情 #

错误信息 #

HttpException: Invalid statusCode: 404, uri = http://10.0.2.2:8000/storage/images//404782image_picker1739157224851247651.jpg

图片根路径常量 #

const String linkimageRoot = "http://10.0.2.2:8000/storage/images/";

图片显示Widget代码 #

ClipOval( 
  child: CachedNetworkImage( 
    height: 30, 
    width: 30, 
    imageUrl: "$linkimageRoot/${controller.data[i]['image']}", 
    placeholder: (context, url) => const Center(child: CircularProgressIndicator()), 
    errorWidget: (context, url, error) => Icon(Icons.error), 
  ), 
), 

问题原因与解决方法 #

原因 #

linkimageRoot已经以斜杠/结尾，拼接时又额外添加了/，导致路径出现双斜杠//，服务器无法识别该无效路径，返回404错误。

解决方法 #

方法1：移除拼接时的多余斜杠

直接去掉变量拼接处的/，修改图片URL代码：

imageUrl: "$linkimageRoot${controller.data[i]['image']}",

方法2：用Uri类自动构建路径（更稳妥）

借助Dart的Uri类处理路径拼接，避免手动拼接的失误：

imageUrl: Uri.parse(linkimageRoot).resolve(controller.data[i]['image']).toString(),

方法3：Laravel端直接返回完整图片URL

在Trademark模型中添加访问器，返回完整图片地址，Flutter端无需拼接：

// 在Trademark模型中添加以下代码
public function getImageUrlAttribute()
{
    return asset('storage/images/' . $this->image);
}

之后API返回时携带image_url字段，Flutter端直接使用controller.data[i]['image_url']即可。

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