Flutter学习笔记:使用DecorationImage加载本地图片的坑

前言部分

我在做Flutter的项目中使用DecorationImage加载本地图片,但是发现怎么加载都是

Unable to load asset: xxx.jpeg(图片名称)

我仔细检查了我的pubspec.yaml文件,因为我以前使用过本地的图片资源,但是这次怎么也不成功,所以推测配置应该说没啥问题的。

  assets:
    - assets/images/flower.jpg
    - assets/images/time.jpeg
    - jsonfile.json
# 下面这是推荐的方式,不过这个不是重点怎么写都可以的。
#    - images/a_dot_ham.jpeg

内容部分

下面开始百度 or Google之旅,由于Flutter面世时间不太长,所以资料不是很多,搜索良久发现如下方式:

stackoverflow上的方案

decoration: new BoxDecoration(
          image: new DecorationImage(
            image: new ExactAssetImage('assets/images/time.png'),
            fit: BoxFit.cover,
          ),
        ),

两个点需要注意:

1.你需要使用ExactAssetImage来替代AssetImage。

2.没错了就是把全路径写上,我当时一顿懵逼,因为如果你参考中文网站的方法是不用写前面的assets的,也 就是说不是写全路径。我也是过分深信,如下官网中的例子:

中文网地址

//配置信息
flutter:
  assets:
    - graphics/background.png
//使用的时候是没有加assets的
decoration: new BoxDecoration(
      image: new DecorationImage(
        image: new AssetImage('graphics/background.png'),
        // ...
      ),
      // ...
    ),

虽然不知道为啥,但是问题还是很奇怪的,因为加载assets中的文件应该是不用写全路径的才对,不过我看到GitHub上也有人遇到这个问题,上面的方案是通过 flutter clean 的命令来解决,但是我试过发现没有生效。

贴个整体的代码吧

new Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: new ExactAssetImage('assets/images/time.jpeg'),
                fit: BoxFit.cover,
              ),
            ),
            padding: const EdgeInsets.all(10),
            child: new Text("哈哈"),
          ),

实现的效果如下,最上面的那个小图片就是效果了。

Flutter学习笔记:使用DecorationImage加载本地图片的坑_第1张图片

结束语

问题不大但是确实很困扰,因为才接触Flutter还很不熟悉,所以写起来会比较慢。

有问题欢迎纠正,谢谢啦

如果对你有帮助就点个赞把。

你可能感兴趣的:(Flutter)