【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.rhkb.cn/news/129708.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySql学习笔记11——DBA命令介绍

DBA命令 数据导入 要进入Mysql 创建数据库 create database database_name;使用数据库 use database_name;初始化数据库 source .sql文件地址&#xff0c;不能加双引号&#xff1b;数据导出 要在windows的dos环境下进行 导出数据库 mysqldump database_name > 存放…

Android 文字转语音播放实现

1&#xff0c;TextToSpeech类是android自带的&#xff0c;但是部分设备需要支持TTS需要增加语音库&#xff0c;我使用的是讯飞语音&#xff08;离线的哦&#xff09;。请自行下载并安装讯飞语音APK&#xff0c;然后到系统设置中设置TTS功能默认使用该选项。有自带TTS库的可以省…

《存储IO路径》专题:块设备层多队列blk-mq架构

我们想象一下&#xff0c;你是一个餐厅的厨师&#xff0c;你要准备很多不同的菜肴&#xff0c;而每种菜肴需要不同的食材和烹饪时间。如果每道菜都按照需要的顺序来准备&#xff0c;那么你的工作效率一定会非常低。为了提高效率&#xff0c;你会怎么做呢&#xff1f; 在linux架…

基于SSM的家政服务网站

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

windows 下载安装 mysql

windows 下载安装 mysql 官网地址&#xff1a;https://dev.mysql.com/ 下载地址&#xff1a;https://cdn.mysql.com//Downloads/MySQLInstaller/mysql-installer-community-8.0.34.0.msi 点击 Downloads 点击 MySQL Community (GPL) Downloads 点击 MySQL Installer for Window…

usb学习笔记

框架 usb 驱动是基于usb core 的&#xff0c;设备插上之后&#xff0c;host 层自然会进行识别&#xff0c;设备驱动通过core层的接口操作设备&#xff0c;而不用直接面对usb硬件。对于应用层需要封装成一个usb 的设备。 驱动是基于urb 数据进行操作的。 49 static void usb_mo…

Windows环境下Springboot3+Graalvm+Idea 打包成原生镜像 踩坑

https://github.com/oracle/graal/https://github.com/graalvm/graalvm-ce-builds/releases/对应关系graalvm-ce-java17-windows-amd64-X.X.X.zipnative-image-installable-svm-java17-windows-amd64-X.X.X.jar本人使用:graalvm-ce-java17-windows-amd64-23.0.1.zipnative-imag…

第4章_瑞萨MCU零基础入门系列教程之瑞萨 MCU 源码设计规范

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…

【C++11】{}初始化、std::initializer_list、decltype、STL新增容器

文章目录 1. C11简介2. 统一的列表初始化2.1 &#xff5b;&#xff5d;初始化2.2 std::initializer_list 3. 声明3.1 auto3.2 decltype 4. nullptr5. 范围for循环6. 智能指针7. C11STL中的一些变化8. 演示代码 1. C11简介 在2003年C标准委员会曾经提交了一份技术勘误表(简称TC1…

英语单词(1)

1.void:空的 2.main:主要的 3.class:类 4.system:系统 5.out: 输出 6.print:打印 7.public:公共的,公用的 8.static:静态的,静止的 9.oracle:甲骨文公司 10.eclipse: java编程语言

生存游戏手游推荐,适合长期玩的生存类手游

今天小编为大家带来了生存游戏手游推荐&#xff0c;适合长期玩的生存类手游。许多朋友现在喜欢冒险&#xff0c;想体验荒野生活&#xff0c;但在现实中&#xff0c;由于各种原因可能实现不了。游戏中的生存可以满足玩家对狂野生存的幻想&#xff0c;让现实中未实现的梦想在虚拟…

element-ui switch开关组件二次封装,添加loading效果,点击时调用接口后改变状态

先看效果&#xff1a; element-ui中的switch开关无loading属性&#xff08;在element-plus时加入了&#xff09;&#xff0c;而且点击时开关状态就会切换&#xff0c;这使得在需要调用接口后再改变开关状态变得比较麻烦。 思路&#xff1a;switch开关外包一层div&#xff0c;给…

大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS

文章目录 &#x1f4da;web前端期末大作业 (1500套) 集合一、网页介绍二、网页集合 三、作品演示A电影主题B漫画主题C商城主题D家乡主题E旅游主题F餐饮/美食主题G环境主题H游戏主题I 个人主题K体育主题L博客主题M汽车主题N文化主题P美妆主题Q企业主题R教育主题S其他主题 &#…

C++在C语言基础上的优化

目录 一、命名空间 1、命名空间的定义 2、命名空间的使用 二、输入&输出 三、缺省参数 1、缺省参数的概念 2、缺省参数的分类 四、函数重载 五、引用 1.引用的概念 2.引用的特性 3、引用和指针的区别 六、内联函数 七、基于范围的for循环 一、命名空间 命名空…

穷举深搜暴搜回溯剪枝(4)

一)单词搜索: 直接在矩阵中依次找到特定字符串 79. 单词搜索 - 力扣&#xff08;LeetCode&#xff09; 画出决策树&#xff0c;只需要做一个深度优先遍历: 1)设计dfs函数:只需要关心每一层在做什么即可&#xff0c;从这个节点开始&#xff0c;开始去尝试匹配字符串的下一个字符…

使用Xshell远程访问工具连接到Linux

首先需要查看Linux地址&#xff0c;在Linux主界面中右键选择“Open in Terminal” 输入“ifconfig”指令查看IP地址 打开Xshell&#xff0c;输入相关信息&#xff0c;建立连接 点击连接&#xff0c;按照提示输入用户名 root和你自己安装centos7时设置的密码&#xff0c;用…

OpenCV_CUDA_VS编译安装

一、OpenCV 我这里是下载的OpenCV4.5.4&#xff0c;但是不知道到在vs里面build时一直报错&#xff0c;后面换了4.7.0的版本测试&#xff0c;安装成功。 Release OpenCV 4.5.4 opencv/opencv GitHub 这个里面有官方预编译好的OpenCV库&#xff0c;可以直接食用。 扩展包&am…

React 展开运算符

0x00 前言 CTF 加解密合集CTF Web合集网络安全知识库溯源相关 文中工具皆可关注 皓月当空w 公众号 发送关键字 工具 获取 0x01 展开运算符 1. 展开数组 <script type"text/javascript">let arr1 [1,3,5,7,9]let arr2 [2,4,6,8,10]console.log(...arr1)&l…

TCP IP网络编程(四) 基于TCP的服务器端、客户端

文章目录 理解TCP、UDPTCP/IP协议栈链路层IP层TCP/UDP层应用层 实现基于TCP的服务器端、客户端TCP服务器端的默认函数调用顺序进入等待连接请求状态受理客户端连接请求TCP客户端的默认函数调用顺序基于TCP的服务器端、客户端函数调用关系 实现迭代服务器端、客户端实现迭代服务…

RK3399平台开发系列讲解(内核调试篇)spidev_test工具使用

🚀返回专栏总目录 文章目录 一、环境二、执行测试三、回环测试四、字节发送测试五、32位数据发送测试沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 在 Linux 系统上,“spidev_test” 是一个用于测试和配置 SPI(Serial Peripheral Interface)设备的命令行工具。…