当前位置: 首页 > news >正文

【Flutter】引入网络图片时,提示:Failed host lookup: ‘[图片host]‘

在使用 NetworkImage 组件加载外部图片时,提示 Failed host lookup: '[图片host]' 错误。

排查方向

1、清理缓存

解决方案:

  1. 尝试flutter clean清空缓存后
  2. 重新安装依赖flutter pub get
  3. 重新构建项目flutter create .
    走完上述三个步骤后,再次启动app,发现图片就能正常加载。

2、检查设备网络

3、没有配置网络权限

android/src/main/AndroidManifest.xmlmanifest标签中配置一下权限:

<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

在这里插入图片描述

4、图片支持跨域

如果项目时运行在Chrome中,确认图片所在的域名是否支持跨域。

大家可能会疑惑,图片资源正常都是浏览器直接使用img标签,或者css中使用background设置背景图片,这些场景浏览器不启用同源策略,所以不用考虑跨域的问题。

但是flutter中的图片资源是组件通过xhr请求获取的,所以需要确保xhr获取图片资源的方式,是否被服务器支持。

image-20230910215423415

上面的例子,是把app部署到chrome上,我们可以看到,图片资源是通过xhr请求获取。

5、使用本地图片替换

例如:要在 UserAccountsDrawerHeader 中使用本地图片作为头像,你可以按照以下步骤操作:

  1. 将图片文件放入项目目录:首先,将你的本地图片文件复制或移动到Flutter项目的合适位置。通常,你可以将图片文件放在项目根目录的子文件夹中,例如 assets/images/
  2. pubspec.yaml文件中配置图片路径:打开项目的 pubspec.yaml 文件,并在其中配置图片路径。添加一个 assets 部分,将图片文件的路径添加到其中,如下所示:
flutter:assets:- assets/images/your_image.png
  1. UserAccountsDrawerHeader 中使用 Image.asset 小部件来显示本地图片。

以下是一个示例,演示如何在 UserAccountsDrawerHeader 中使用本地图片作为头像:

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Drawer Example'),),drawer: Drawer(child: ListView(padding: EdgeInsets.zero,children: <Widget>[UserAccountsDrawerHeader(accountName: Text('John Doe'),accountEmail: Text('john.doe@example.com'),currentAccountPicture: CircleAvatar(backgroundImage: AssetImage('assets/images/your_image.png'),//--here),),ListTile(title: Text('Item 1'),onTap: () {// Handle item 1 tap},),ListTile(title: Text('Item 2'),onTap: () {// Handle item 2 tap},),// Add more list items as needed],),),),);}
}
http://www.lryc.cn/news/163716.html

相关文章:

  • Python基础教程:索引和切片
  • JVM基础面试题
  • 蓝桥杯官网填空题(平方末尾)
  • 深入探究数据结构与算法:构建强大编程基础
  • Android 自定义View之圆形进度条
  • 力扣(LeetCode)算法_C++——字母异位词分组
  • 【LeetCode-中等题】59. 螺旋矩阵 II
  • 错误: 找不到或无法加载主类 Main
  • 【云原生】Kubeadmin安装k8s集群
  • Java:Springboot和React中枚举值(数据字典)的使用
  • git撤回 不小心 commit 进去的文件
  • qt之movetothread理解
  • 深入剖析:垃圾回收你真的了解吗?
  • ue5 物理场的应用
  • 移动零00
  • go初识iris框架(四) -框架设置操作
  • python基础语法(二)
  • 从本地到Gitee:一步步学习文件上传及解决常见报错问题
  • idea2018修改大小写提示(敏感)信息
  • Quartz.Net调度框架简介
  • HarmonyOS/OpenHarmony(Stage模型)应用开发组合手势(一)连续识别
  • Redis --- 位图
  • 自然语言处理-词向量模型-Word2Vec
  • List知识总结
  • 代码随想录day32
  • 2.8 PE结构:资源表详细解析
  • Python数据类型的相互转换
  • 阿里云云主机免费试用三个月
  • OpenHarmony 使用 ArkUI Inspector 分析布局
  • Axes3D绘制3d图不出图解决办法【Python】