Dart/flutter:如何在模拟器的本地主机上显示来自 API 的图像
Posted
技术标签:
【中文标题】Dart/flutter:如何在模拟器的本地主机上显示来自 API 的图像【英文标题】:Dart/fultter : How can I display Images from API on localhost in emulator 【发布时间】:2020-08-15 22:37:00 【问题描述】:当我想在本地主机上显示来自我的 API 的图像模拟器时遇到问题 它出现的所有文本,当我通过图像 url 模拟器浏览器时,它也会显示,但是当我在应用小部件 (NetworkImage(imageUrl) 中显示图像时,出现以下异常
图片资源服务捕捉到异常═══════════════════════════════════════════════ ═══════ 解析图像编解码器时引发了以下 SocketException: 操作系统错误:连接被拒绝,errno = 111,地址 = 127.0.0.1,端口 = 48458
当异常被抛出时,这是堆栈:
0 NetworkImage._loadAsync (package:flutter/src/painting/_network_image_io.dart:84:41)
1 NetworkImage.load(包:flutter/src/painting/_network_image_io.dart:47:14)
2 ImageProvider.resolve...(包:flutter/src/painting/image_provider.dart:327:17)
3 ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:160:22)
... 图片提供者:NetworkImage("http://127.0.0.1:8000/14176.jpg", scale: 1.0) 图片键:NetworkImage("http://127.0.0.1:8000/14176.jpg", scale: 1.0)
════════图片资源服务捕获异常════════════════════════════════ ═══════════════ 操作系统错误:连接被拒绝,errno = 111,地址 = 127.0.0.1,端口 = 48460
我的代码: 滑块服务
class SliderService
String _baseUrl = 'http://10.0.2.2:8000/api';
getAllSlider() async
return await httpGet('sliders');
httpGet(String api)async
return await http.get(_baseUrl + '/' + api,headers: "Accept": "application/json" );
主屏幕代码:
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:storeapp/services/slider_service.dart';
import 'package:storeapp/widgets/carousel_slider.dart';
class HomeScreen extends StatefulWidget
@override
_HomeScreenState createState() => _HomeScreenState();
class _HomeScreenState extends State<HomeScreen>
SliderService _sliderService = SliderService();
var items=[];
@override
void initState()
// TODO: implement initState
super.initState();
_getSliders();
_getSliders() async
var sliders = await _sliderService.getAllSlider();
var result = json.decode(sliders.body);
result['data'].forEach((data)
setState(()
items.add(
NetworkImage(data['image_url']
)
);
//print(data['image_url']);
);
);
@override
Widget build(BuildContext context)
print("Items : $items");
return Scaffold(
appBar: AppBar(
title: Text("MY STORE"),
centerTitle: true,
),
body: Container(
height: 450,
child: ListView(
children: <Widget>[
carouselSlider(items),
),
],
),
),
);
我怎样才能解决这个问题并在没有任何错误的情况下显示来自本地主机的图像
【问题讨论】:
【参考方案1】:您是否在 android 清单文件中为调试和主文件授予了 Internet 权限。
已经检查过这个插件。
https://pub.dev/packages/cached_network_image
使用此代码检查是否有效
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
placeholder: (context, url) => new CircularProgressIndicator(),
errorWidget: (context, url, error) => new Icon(Icons.error),
),
【讨论】:
是的,我在调试和主程序中都做过。任何文本都来自 API,它显示没有任何问题只有图像不显示并给出异常 已编辑帖子,如果错误仍然存在,只需发布示例 json。以上是关于Dart/flutter:如何在模拟器的本地主机上显示来自 API 的图像的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Dart/Flutter 中读取本地图像文件的字节数?