flutter加载本地图片

一、步骤

1.在工程根目录下创建images文件夹，将图片放入该目录中
 
2.在工程pubspec.xml文件中，找到flutter，添加刚才放入的图片

1. # The following section is specific to Flutter.
2. flutter:
4.   # The following line ensures that the Material Icons font is
5.   # included with your application, so that you can use the icons in
6.   # the material Icons class.
7.   uses-material-design: true
9.   # To add assets to your application, add an assets section, like this:
10.   assets:
11.     - images/icon_settings.png

复制代码

3.在代码中加载本地图片，有两种方式

1. // 方式一
2. Image(
3.   image: AssetImage('images/icon_settings.png'),
4.   width: 24,
5.   height: 24,
6. ),
8. // 方式二
9. Image.asset('images/icon_settings.png',
10.   width: 24,
11.   height: 24,
12. ),

复制代码

flutter加载本地图片步骤很简单，但里面有许多需要注意的点，不然很容易报错，踩坑 。
二、注意的点

1.在pubspec.yaml文件中添加图片时，由于 yaml 文件对缩进严格，所以必须严格按照每一层两个空格的方式进行缩进，此处 assets 前面应有两个空格。即assets要比flutter缩进两格，与上面默认的uses-material-design对齐，缩进格式不对的话会报如下错误：

1. Error detected in pubspec.yaml:
2. Error on line 48, column 4: Expected a key while parsing a block mapping.
3.    ╷
4. 48 │    assets:
5.    │    ^
6.    ╵

复制代码

相信有不少小伙伴是直接使用快捷键取消工程原本模板中的assets内容，就会出现此编译错误，重新对齐编译就好。
注：assets下的图片不需要严格的按照两格的缩进，但是图片前的间隔符-必须要有，并且图片和间隔符至少要有一个空格，不然也会报错：
错误一：

1.   # To add assets to your application, add an assets section, like this:
2.   assets:
3.     images/icon_settings.png

复制代码

错误一报错如下： 

1. Error detected in pubspec.yaml:
2. Expected "assets" to be a list, but got images/icon_settings.png (String).

复制代码

错误二：

1.   # To add assets to your application, add an assets section, like this:
2.   assets:
3.     -images/icon_settings.png

复制代码

 错误二报错如下：

1. Error detected in pubspec.yaml:
2. Expected "assets" to be a list, but got -images/icon_settings.png (String).

复制代码

不会报错的写法： 
正确一：标准写法

1.   # To add assets to your application, add an assets section, like this:
2.   assets:
3.     - images/icon_settings.png

复制代码

正确二：间隔符-比assets缩进三格

1.   # To add assets to your application, add an assets section, like this:
2.   assets:
3.      - images/icon_settings.png

复制代码

正确三：间隔符-后两个空格

1.   # To add assets to your application, add an assets section, like this:
2.   assets:
3.     -  images/icon_settings.png

复制代码

正确四：间隔符-比assets缩进三格，并且后两个空格

1.   # To add assets to your application, add an assets section, like this:
2.   assets:
3.      -  images/icon_settings.png

复制代码

建议大家都采用标准写法，避免出现错误找不到地方，同时也保证了代码规范~
2.pubspec.yaml文件assets声明时、代码中使用图片时，要确保图片名称及后缀都与images目录下图片名称及后缀保持一致，由于flutter在引用资源时不会有代码智能提示，资源都得手动写入，比较容易出现文件名书写错误的问题。图片的后缀类型如png也必须加上。
建议大家images下的图片名称采用全小写加下划线的方式书写（如：icon_settings.png），然后复制图片的全名称（图片名+类型）添加到yaml文件和代码文件中。
3.images目录下可以再创建子目录，子目录里的图片在声明或加载时要写全路径：

yaml中声明：

1.   # To add assets to your application, add an assets section, like this:
2.   assets:
3.     - images/me/icon_avatar.png
4.     - images/icon_settings.png

复制代码

 代码中加载：

1. // 方式一
2. Image(
3.   image: AssetImage('images/me/icon_avatar.png'),
4.   width: 24,
5.   height: 24,
6. ),
8. // 方式二
9. Image.asset('images/me/icon_avatar.png',
10.   width: 24,
11.   height: 24,
12. ),

复制代码

小技巧：yaml文件中声明图片时，可以只声明目录，这样目录下所有的图片都会被声明，不用再麻烦声明每一个图片：

1.   # To add assets to your application, add an assets section, like this:
2.   assets:
3.     - images/me/

复制代码

 注意，只声明目录时，后面的反斜杠/必须带上，否则会报如下错误：

1. Error detected in pubspec.yaml:
2. No file or variants found for asset: images/me.

复制代码

4. 加载项目中所有第三方依赖包中的本地图片时，需要在代码中添加包名；而加载项目自身的本地图片时，则不需要添加包名。不按要求都会报错！！！

1. // 加载自身的图片，不需要加package包名
2. Image.asset('images/icon_settings.png',
3.   width: 24,
4.   height: 24,
5. ),
7. // 加载依赖包中的图片，需要加package包名
8. Image.asset('images/icon_share.png',
9.   width: 24,
10.   height: 24,
11.   package: 'com.xxx.xxx', //正确的依赖包包名
12. ),

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！