首页 > 其他分享 >Flutter项目引入不同格式图片

Flutter项目引入不同格式图片

时间:2024-07-31 14:23:55浏览次数:15  
标签:GIF svg Flutter images WebP 引入 格式 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图片转为支持的格式1
  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。 ↩︎

标签:GIF,svg,Flutter,images,WebP,引入,格式,flutter,图片
From: https://blog.csdn.net/weixin_51933661/article/details/140820668

相关文章

  • HarmonyOS 集成 Flutter 问题记录
    1、DevEco-Studio升级到DevEco-StudioNEXTDeveloperBeta25.0.3版本之后报错:>hvigorERROR:Schemavalidatefailed.Detail:Pleasecheckthefollowingfields.{instancePath:'modules[2].srcPath',keyword:'pattern',params:{pa......
  • THIRD_PARTY_NOTICES.chromedriver - 执行格式错误 - unDetected_chromedriver
    unDetected_chromedriverwithwebdriver_manager几天前在抓取网站时运行良好,但突然开始抛出错误:OSError:[Errno8]Execformaterror:'/Users/pd/.wdm/drivers/chromedriver/mac64/127.0.6533.72/chromedriver-mac-x64/THIRD_PARTY_NOTICES.chromedriver'......
  • 论文阅读:引入词集级注意力机制的中文命名实体识别方法
    WSA-CNER方法首先,将输入序列的每个字映射成一个字向量;然后,将外部词汇信息整合到每个字的最终表示中;最后,将字的最终表示输入到序列建模层和标签预测层中,得到最终的预测结果。输入表示层使用SoftLexicon方法将输入序列中每个字的词典匹配结果划分为4个词集(BMES)。输入序列......
  • 格式化字符串(summer2024_fmt)
    参考博客[参考博客]:https://blog.csdn.net/ysy___ysy/article/details/135700140[参考博客]:https://blog.csdn.net/2402_83422357/article/details/139180404戳此切大佬博客https://blog.csdn.net/Morphy_Amo/article/details/122215773https://blog.csdn.net/song_lee/......
  • 格式举例
    文章目录amarkdownunorderedlistwhichwillbereplacedwiththetoc,*号前面和后面需要有个空格。文本这是一个段落,我要把它设置为蓝色,只需在前面的标签上嵌入style属性即可,style用于内联css。toboldtext,use<strong>.toitalicizetext,use<em>.tohigh......
  • 如何将 panda 日期时间转换为特定日期格式,然后从中提取子字符串
    我在熊猫中有这个日期时间列。我正在将其转换为特定的日期格式。我想将此日期转换为字符串并从中提取子字符串。我发现很难做到。有谁知道如何。我的日期时间列中的数据如下所示:2024-01-3013:45:002024-01-3014:45:002024-01-3015:45:00我已使用以下语句将其转换......
  • C++11 中引入的auto关键字
    什么是auto关键字?    在C++11中,auto关键字被引入作为一种类型推断的机制(在编译期间执行),它允许编译器自动推断变量的类型。auto使用时需要注意的问题:1、auto与指针和引用结合使用:首先说一下auto和auto*为什么一样,因为在autoa=&x;这里auto类型推......
  • 将字符串转换为json格式
    我有一个Excel电子表格,当我直接在python中读取它时,它失败了。所以我先在PowerQuery中读,然后在python中读,但是在PowerQuery中读时丢失了json双引号。我尝试了demjson3,但无法成功。我尝试用Python逐行阅读,这不是一个好主意。我希望能够在python中将其呈现为json。......
  • 为什么在 CDS BETA 后出现 CDS API 格式错误?
    [对于上下文,我使用的是macOS和Python]安装cdsapi后,基本上按照官方网站的用户指南中的说明进行cdsapi设置:https://cds-beta.climate.copernicus.eu/how-to-api,并运行此示例代码进行数据访问,返回此错误{示例代码}importcdsapi客户端=cdsapi.Cli......
  • Pycharm 设置 yaml 格式接口测试用例模板 (python+pytest+yaml)
    前言初次编写的伙伴们可能对yaml格式不太熟悉,自己写yaml用例的时候,总是格式对不齐啊记不住设定好的关键字啊等等等琐事是我们可以在pycharm上设置用例模块,通过快捷方式调用出对应的模块,达到高效写用例的目的。 pycharm操作集:1、File-Settings(快捷键Ctrl+Alt+S) 2、Live......