2018-12-27

flutter加载本地图片加载不出来

flutter Image 加载图片可以分为4中情况，分别为：

Image.network  // 从网络加载图片

Image.file            // 从file加载图片

Image.asset        // 从本地指定目录中加载图片

Image.memory  // 从缓存中加载图片

下面我们来针对“Image.asset ”遇到的坑进行简单分析（关于@2x，@3x图部分不做说明）。

加载不出来本地图片的配置如下图：

Image.asset 本地指定目录配置图片

在“pubspec.yaml”文件中进行对assets部分进行了声明。

再看项目工程中的加载图片的部分代码（详见下图所示）

Image.asset 加载图片部分代码

怎么看也没有毛病，也是安装官方要求写的，怎么就是加载不出来图片。

控制台提示：“Unable to load assets: assets/images/publish_chat_box.png”.

这不科学呀，好吧，再次查阅官方文档，如下图。

Image.asset 官方示例

对比官方示例，没有任何错误之处。这就郁闷了........

好吧，那就完全按照官方要求进行操作，代码copy一份过来。

按照官方要求进行配置

---

发现提示：“Error on line 48, column 9 of pubspec.yaml: Mapping values are not allowed here. Did you miss a colon earlier?”

呜呜，痛哭一声吧，这哪里出错了？

我进行了全量“- assets/images/”配置了。怎么也不行。

不是第48行出错了，那就按照官方要求，向后推2个空格试试。

uses-material-design向后退2个空格

这次错误更奇葩了“Error on line 50, column 3 of pubspec.yaml: Expected ':'.”

为何第49行不提示错误？第50行提示错误呢？实在费解......

---

最终发现这些错误都是没有按照官方要求做。解决办法如下图：

Image.asset  从本 加载图片正确配置方式1

mage.asset  从本 加载图片正确配置方式2

建议大家使用方式1.

总结：flutter中的“pubspec.yaml”文件对空格，要求比较严格。个人认为目前谷歌官方虽然已经发布了release版本，但是很多地方依然需要完善。dart语言从谷歌提出到现在已经好几年了，希望尽快完善起来。