flutter加载本地图片
一、步骤
1.在工程根目录下创建images文件夹,将图片放入该目录中
2.在工程pubspec.xml文件中,找到flutter,添加刚才放入的图片
# The following section is specific to Flutter.
flutter:# The following line ensures that the Material Icons font is# included with your application, so that you can use the icons in# the material Icons class.uses-material-design: true# To add assets to your application, add an assets section, like this:assets:- images/icon_settings.png
3.在代码中加载本地图片,有两种方式
// 方式一
Image(image: AssetImage('images/icon_settings.png'),width: 24,height: 24,
),// 方式二
Image.asset('images/icon_settings.png',width: 24,height: 24,
),
flutter加载本地图片步骤很简单,但里面有许多需要注意的点,不然很容易报错,踩坑 。
二、注意的点
1.在pubspec.yaml文件中添加图片时,由于 yaml 文件对缩进严格,所以必须严格按照每一层两个空格的方式进行缩进,此处 assets 前面应有两个空格。即assets要比flutter缩进两格,与上面默认的uses-material-design对齐,缩进格式不对的话会报如下错误:
Error detected in pubspec.yaml:
Error on line 48, column 4: Expected a key while parsing a block mapping.╷
48 │ assets:│ ^╵
相信有不少小伙伴是直接使用快捷键取消工程原本模板中的assets内容,就会出现此编译错误,重新对齐编译就好。
注:assets下的图片不需要严格的按照两格的缩进,但是图片前的间隔符-必须要有,并且图片和间隔符至少要有一个空格,不然也会报错:
错误一:
# To add assets to your application, add an assets section, like this:assets:images/icon_settings.png
错误一报错如下:
Error detected in pubspec.yaml:
Expected "assets" to be a list, but got images/icon_settings.png (String).
错误二:
# To add assets to your application, add an assets section, like this:assets:-images/icon_settings.png
错误二报错如下:
Error detected in pubspec.yaml:
Expected "assets" to be a list, but got -images/icon_settings.png (String).
不会报错的写法:
正确一:标准写法
# To add assets to your application, add an assets section, like this:assets:- images/icon_settings.png
正确二:间隔符-比assets缩进三格
# To add assets to your application, add an assets section, like this:assets:- images/icon_settings.png
正确三:间隔符-后两个空格
# To add assets to your application, add an assets section, like this:assets:- images/icon_settings.png
正确四:间隔符-比assets缩进三格,并且后两个空格
# To add assets to your application, add an assets section, like this:assets:- images/icon_settings.png
建议大家都采用标准写法,避免出现错误找不到地方,同时也保证了代码规范~
2.pubspec.yaml文件assets声明时、代码中使用图片时,要确保图片名称及后缀都与images目录下图片名称及后缀保持一致,由于flutter在引用资源时不会有代码智能提示,资源都得手动写入,比较容易出现文件名书写错误的问题。图片的后缀类型如png也必须加上。
建议大家images下的图片名称采用全小写加下划线的方式书写(如:icon_settings.png),然后复制图片的全名称(图片名+类型)添加到yaml文件和代码文件中。
3.images目录下可以再创建子目录,子目录里的图片在声明或加载时要写全路径:
yaml中声明:
# To add assets to your application, add an assets section, like this:assets:- images/me/icon_avatar.png- images/icon_settings.png
代码中加载:
// 方式一
Image(image: AssetImage('images/me/icon_avatar.png'),width: 24,height: 24,
),// 方式二
Image.asset('images/me/icon_avatar.png',width: 24,height: 24,
),
小技巧:yaml文件中声明图片时,可以只声明目录,这样目录下所有的图片都会被声明,不用再麻烦声明每一个图片:
# To add assets to your application, add an assets section, like this:assets:- images/me/
注意,只声明目录时,后面的反斜杠/必须带上,否则会报如下错误:
Error detected in pubspec.yaml:
No file or variants found for asset: images/me.
4. 加载项目中所有第三方依赖包中的本地图片时,需要在代码中添加包名;而加载项目自身的本地图片时,则不需要添加包名。不按要求都会报错!!!
// 加载自身的图片,不需要加package包名
Image.asset('images/icon_settings.png',width: 24,height: 24,
),// 加载依赖包中的图片,需要加package包名
Image.asset('images/icon_share.png',width: 24,height: 24,package: 'com.xxx.xxx', //正确的依赖包包名
),
flutter加载本地图片相关推荐
- Flutter 加载本地图片的坑
直接取消注释发现报错 原因是 这个 assets 要和上面 user-material-design 进行对其
- 【Flutter】Image 组件 ( 加载网络图片 | 加载静态图片 | 加载本地图片 | path_provider 插件 )
文章目录 一.加载网络图片 二.加载静态图片 三.加载本地图片 四.完整代码示例 五.相关资源 一.加载网络图片 参考 [Flutter]Image 组件 ( Image 组件简介 | Image 构 ...
- c语言加载本地图片,Unity加载本地图片的2种方式
1. 使用 WWW 加载,详细查看 unity3d 官方文档. 2. 使用 System.IO 加载,lua 代码如下: local File = luanet.import_type("S ...
- UIWebView如何加载本地图片
UIWebView如何加载本地图片 UIWebView加载本地图片是有实用价值的.比方说,有时候我们需要本地加载静态页来显示相关帮助信息,而这些帮助信息当中含有很多很多的富文本,用代码实现难度较大,这 ...
- 剖析Picasso加载压缩本地图片流程(解决Android 5.0部分机型无法加载本地图片的问题)
之前项目中使用Picasso遇到了一个问题:在Android 5.0以上版本的部分手机上使用Picasso加载本地图片会失败.为了解决这个问题,研究了一下Picasso加载和压缩本地图片的流程,才有了 ...
- ios html异步加载图片,iOS 异步加载本地图片
iOS 异步加载本地图片 问题 当某个界面使用系统API + (nullable UIImage *)imageNamed:(NSString *)name;加载了过多本地图片资源时,不可避免的会产生 ...
- 短视频系统源代码,加载本地图片和加载网络图片
在短视频系统源代码中,上传照片时会涉及到加载本地图片或加载网络图片的情况,下面介绍一下相关代码 从布局开始 <?xml version="1.0" encoding=&quo ...
- Android 加载本地图片(文件管理器中的图片墙)
Android 加载本地图片(文件管理器中的图片墙) --关于图片墙的一些感悟与疑问,希望大家共同探讨. (By伊叶也) 图片显示及监听 1.图片显示:基本上就5种显示形式(如果同时嵌入5种形式,采用 ...
- 可以加载本地图片和网络资源的轮播图:TuTu
轮播图 可以加载本地图片或者网络资源的无限循环的轮播图,一行代码调用,图片三级缓存,节省流量,间隔自己设置,使用方便. 1.你只要写好布局就行,布局写成啥样你自己决定,扩展性强,满足多样化需求例如: ...
- 小程序加载本地图片解决方案
小程序加载本地图片: https://www.cnblogs.com/greengage/p/7742106.html 推荐使用下面的第三种方法: https://blog.csdn.net/qq_4 ...
最新文章
- keras系列︱图像多分类训练与利用bottleneck features进行微调(三)
- 什么是目标检测中的旋转敏感度错误?
- 独家 | 神经网络的对抗性攻击:快速梯度符号方法的探索(附链接)
- 20162303 结对编程-四则运算(挑战出题)
- Android ProGuard使用要点!
- magento根据浏览次数为商品做排行
- Gradle 设置 本地maven仓库及发布mavenLocal()路径的方法
- python相关工具
- python测试开发django-25.表单提交之post注册案例
- jlist动态添加元素后刷新_小米电视5再曝光:MEMC动态画质补偿技术
- mysql 替换全部标内容_Mysql SQL 替换标签内容
- 深入HashCode方法
- Win2008首次使用关闭的安全选项
- python实现聊天工具_python开发简单的聊天工具
- 蓝桥杯第四届初赛“模拟智能灌溉系统”设计任务书
- 通过EverEdit工具连接Linux系统远程操作文件
- InnoDB引擎--事务持久性
- 考研 数学1 2 3 区别
- 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标
- PHP开发基于Mirai的QQ机器人(一)
热门文章
- php 降低视频分辨率,怎么看视频的分辨率 如何改变视频分辨率|视频分辨率修改器...
- python数据分析与可视化答案学堂云_学习Python编程学堂云答案
- 【十次方】Springboot中使用SpringCache做缓存
- 快手AI技术副总裁郑文:为什么说AI是短视频平台的核心能力
- 充电和库仑计,charge(bq24161) and coulomb(bq27425)
- matlab求单自由度振动方程为,matlab求解振动方程
- ArcPad 10 使用与同步 ArcGIS Server 的数据全攻略(一)
- 网络安全技术之虚拟专用网络
- GBK字库制作、字模数据读取、使用
- Cozmo人工智能机器人SDK使用笔记(8)-应用部分apps