(转载仅作记录)Flutter加载https图片无法显示，受限证书问题

转载已于 2022-06-10 15:34:36 修改 · 1.4k 阅读

CC 4.0 BY-SA版权

原文链接：https://stackoverflow.com/questions/49853006/trying-to-load-an-image-using-networkimage-fails-with-certificate-verify-failed

文章标签：

#flutter #https #ios

于 2021-12-06 09:51:18 首次发布

Android 同时被 3 个专栏收录

40 篇文章

订阅专栏

flutter

24 篇文章

订阅专栏

ios

10 篇文章

订阅专栏

本文介绍了一种在Flutter中解决Image.network加载HTTPS图片时出现证书错误的方法。通过创建一个自定义的NetworkImageSSL类，该类覆盖了默认的网络请求，忽略证书验证，从而能够成功显示图片。只需将原来的Image.network替换为新的NetworkImageSSL即可。

找到的解决办法是这个：这里是原文链接点击这里

因为没有证书，直接用Image.network方法显示HTTPS图片时报错证书问题
新建一个工具类：NetworkImageSSL

import 'dart:async';
import 'dart:io';
import 'dart:typed_data';
import 'dart:ui' as ui show instantiateImageCodec, Codec;

import 'package:flutter/foundation.dart';
import 'package:flutter/painting.dart';

/// Image.network方法显示HTTPS图片时忽略证书
class NetworkImageSSL extends ImageProvider<NetworkImageSSL> {
  const NetworkImageSSL(this.url, {this.scale = 1.0, this.headers})
      : assert(url != null),
        assert(scale != null);

  final String url;

  final double scale;

  final Map<String, String> headers;

  @override
  Future<NetworkImageSSL> obtainKey(ImageConfiguration configuration) {
    return new SynchronousFuture<NetworkImageSSL>(this);
  }

  @override
  ImageStreamCompleter load(NetworkImageSSL key, DecoderCallback decode) {
    return MultiFrameImageStreamCompleter(codec: _loadAsync(key), scale: key.scale);
  }

  static final HttpClient _httpClient = new HttpClient()
    ..badCertificateCallback =
    ((X509Certificate cert, String host, int port) => true);

  Future<ui.Codec> _loadAsync(NetworkImageSSL key) async {
    assert(key == this);

    final Uri resolved = Uri.base.resolve(key.url);
    final HttpClientRequest request = await _httpClient.getUrl(resolved);
    headers?.forEach((String name, String value) {
      request.headers.add(name, value);
    });
    final HttpClientResponse response = await request.close();
    if (response.statusCode != HttpStatus.ok)
      throw new Exception(
          'HTTP请求失败，状态码: ${response?.statusCode}, $resolved');

    final Uint8List bytes = await consolidateHttpClientResponseBytes(response);
    if (bytes.lengthInBytes == 0)
      throw new Exception('NetworkImageSSL是一个空文件: $resolved');

    return await ui.instantiateImageCodec(bytes);
  }

  @override
  bool operator ==(dynamic other) {
    if (other.runtimeType != runtimeType) return false;
    final NetworkImageSSL typedOther = other;
    return url == typedOther.url && scale == typedOther.scale;
  }

  @override
  int get hashCode => hashValues(url, scale);

  @override
  String toString() => '$runtimeType("$url", scale: $scale)';
}

我原来的方法是

child: Image.network(imgurl, fit: BoxFit.fill,),

现在改为

new Image(image: NetworkImageSSL(imgurl), fit: BoxFit.cover)

这样就可以忽略证书，显示图片了