Dartfultter : 我如何在模拟器中显示来自本地主机上API的图片？

Question

我有一个问题，当我想在本地主机上显示来自我的API的图像模拟器的文本，它的出现，也当我过去的图像网址模拟器浏览器，它的显示，但当我在应用程序的widget（NetworkImage(imageUrl)）内显示图像，我得到了以下异常。

拒绝连接，errno=111，地址=127.0.0.1，端口=48458。

当异常被抛出时，这是堆栈。

0 NetworkImage._loadAsync (package:fluttersrcpainting_network_image_io.dart:84:41)

1 NetworkImage.load (package:fluttersrcpainting_network_image_io.dart:47:14)

2 ImageProvider.resolve... (package:fluttersrcpaintingimage_provider.dart:327:17)

3 ImageCache.putIfAbsent (package:fluttersrcpaintingimage_cache.dart:160:22)

...图像提供者。网络图像("http:/127.0.0.1:800014176.jpg。"，比例。1.0)Image key: NetworkImage("http:/127.0.0.1:800014176.jpg。"，比例尺。1.0)

══════由图像资源服务捕获的异常 ═══════════════ ════════ ══════OS错误。拒绝连接，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),


            ),
          ],
        ),
      ),
    );
  }
}

如何解决这个问题，并能无误地显示来自localhost的图片？

Answer 1

你有没有给Android清单文件中的调试和主的互联网权限。

已经检查了这个插件。

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),
     ),