Flutter项目引入不同格式图片

​
今天尝试在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图片，无法识别。

解决方法

1. 将svg图片转为支持的格式¹
2. 使用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

---

1. 官方文档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。 ↩︎