Dart/flutter：如何在模拟器的本地主机上显示来自 API 的图像

Posted 2023-02-23

【中文标题】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。