Laravel返回图片数据在Flutter中无法显示，报错求助

错误1：Invalid argument(s): No host specified in URI file:///jsonlist%5Bindex%5D%5B'image'%5D #

问题原因 #

Laravel返回的图片路径是相对路径，而非完整的可访问HTTP URL，导致Flutter的Image.network无法识别有效的图片地址，误将变量名当作了路径。

解决方法 #

在Laravel返回数据时，给图片字段拼接服务器域名+存储路径前缀，生成完整可访问URL：

public function getData(){
    $images = imageModel::orderBy('id','DESC')->get();
    // 转换图片路径为完整HTTP URL
    $images->transform(function($item) {
        // 根据实际存储路径调整：如果数据库存的是storage下的相对路径，用url()拼接
        $item->image = url($item->image);
        // 若图片存在public/storage目录下，也可使用Storage::url($item->image)
        return $item;
    });
    return response()->json($images);
}

错误2：Leading widget consumes entire tile width. Please use a sized widget, or consider replacing ListTile with a custom widget #

问题原因 #

ListTile的leading组件未被明确约束尺寸，导致其宽度溢出tile范围。

解决方法 #

用SizedBox包裹ClipRRect，固定宽高，确保leading组件尺寸符合ListTile的布局规范：

void getData() async{
    try{
        var response = await Dio().get("http://192.168.1.10:80/api/getdata");
        if(response.statusCode == 200){
            setState(() {
                jsonlist = response.data as List;
            });
        }
    } catch(e) {
        // 新增异常捕获，方便排查请求问题
        print(e.toString());
    }
}

@override
Widget build(BuildContext context) {
    return Scaffold(
        body: ListView.builder(
            itemBuilder: (BuildContext context, int index){
                return Card(
                    child: ListTile(
                        leading: SizedBox(
                            width: 50,
                            height: 50,
                            child: ClipRRect(
                                borderRadius: BorderRadius.circular(80),
                                child: Image.network(
                                    jsonlist[index]['image'],
                                    fit: BoxFit.cover,
                                    width: 50,
                                    height: 50,
                                ),
                            ),
                        ),
                        title: Text(jsonlist[index]['title']),
                    ),
                );
            },
            itemCount: jsonlist?.length ?? 0,
        ),
    );
}

额外注意事项 #

1. 确保Laravel已执行php artisan storage:link，将storage/app/public目录链接到public/storage，保证图片可公开访问。
2. 可通过print(jsonlist[index]['image'])验证返回的图片URL是否为完整的HTTP格式。

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