时间戳

首页 > 解决方案 > 如何在我的应用中显示从 API 响应接收到的图像

android - 如何在我的应用中显示从 API 响应接收到的图像

问题描述

我正在使用 http 包发出获取请求并从 API 中获取数据。但我似乎无法理解如何在我的应用程序中显示图像

这是代码：

***Cars.dart***

Future<CartModel> fetchCartModel() async {
  final response = await http
      .get(Uri.parse('https://jsonplaceholder.typicode.com/photos'));

  if (response.statusCode == 200) {

    return CartModel.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Failed to load data');
  }
}

class Cars extends StatefulWidget {
  @override
  _CarsState createState() => _CarsState();
}
class _CarsState extends State<Cars> {
   Future<CartModel> futureCartModel;
   @override
   void initState() {
     super.initState();
     futureCartModel = fetchCartModel();
   }
    Container(
width: 180,
height: 139,
margin:EdgeInsets.all(5),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(''),
fit: BoxFit.fill,
),
),
),

这是模型类：

class CartModel {
  int albumId;
  int id;
  String title;
  String url;
  String thumbnailUrl;

  CartModel({this.albumId, this.id, this.title, this.url, this.thumbnailUrl});

  CartModel.fromJson(Map<String, dynamic> json) {
    albumId = json['albumId'];
    id = json['id'];
    title = json['title'];
    url = json['url'];
    thumbnailUrl = json['thumbnailUrl'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['albumId'] = this.albumId;
    data['id'] = this.id;
    data['title'] = this.title;
    data['url'] = this.url;
    data['thumbnailUrl'] = this.thumbnailUrl;
    return data;
  }
}

我能够从应用程序获取文本数据，但我似乎无法理解如何显示我从 API 获取的图像。

标签： androidflutterdart

解决方案

您可以使用

Image.network('***your image url here*****')

推荐阅读