Flutter项目引入不同格式图片

果果校长

已于 2024-07-31 14:27:48 修改

阅读量183

点赞数 7

分类专栏： Flutter学习文章标签： flutter 前端开发语言

于 2024-07-31 14:26:14 首次发布

本文链接：https://blog.csdn.net/weixin_51933661/article/details/140820668

版权

1 篇文章 0 订阅

订阅专栏

今天尝试在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图片转为支持的格式¹
使用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。 ↩︎

关注

专栏目录