今天尝试在Flutter中引用本地图片:
最初在页面中直接引入图片,控制台报错:
Unable to load asset:"images/***"
发现自己未对该静态资源文件夹进行配置声明
在pubspec.yaml文件中对assets进行配置:
images/
表示包含的是images这一整个目录文件夹下的所有静态资源
此时重启项目
在页面使用png图片:
Image(image: AssetImage("images/google.png")),
显示正常:
但是引入svg图片,控制台报错:
Another exception was thrown: ImageCodecException: Failed to detect image file format using the file header.
意思是:使用文件头检测图像文件格式失败
图片名称正常、其他项目使用也正常,我一直误解为我的配置错误,导致图片无法显示,但各种解决方法都试过,均显示错误;
a few minutes later…
原来Flutter不支持直接渲染svg图片,无法识别。
解决方法
- 将svg图片转为支持的格式1
- 使用flutter_svg插件。该插件能够帮助Flutter加载和渲染SVG文件
flutter_svg使用
安装
flutter pub add flutter_svg
使用
//引入
import 'package:flutter_svg/flutter_svg.dart';
//flutter_svg 提供一个SvgPicture组件(用法与Image组件类似)
SvgPicture.asset("images/Facebook.svg",width: 30,)
显示结果:
总结
通过pubspec.yaml
文件中的assets配置能够正常使用多数图片,但如果要引入svg图片,需要使用flutter_svg提供的SvgPicture组件来实现(无论是本地还是网络图片),而不是自带的Image组件。
学习中,期待指正,一起共勉!
tips:文中出现的图标来源于iconfont
官方文档Adding assets and images小节写到
Common types of assets include static data (for example, JSON files), configuration files, icons, and images (JPEG, WebP, GIF, animated WebP/GIF, PNG, BMP, and WBMP).
,即常见图片图标格式为JPEG、WebP、GIF、动画 WebP / GIF、PNG、BMP 和 WBMP。 ↩︎