flutter如何加载本地图片

在Flutter项目中，我想加载本地图片资源，但按照文档在pubspec.yaml中配置后依然报错"Unable to load asset"。我的配置如下：

assets:
  - images/my_image.png

图片放在项目根目录的images文件夹内。请问正确的配置格式是什么？是否需要额外的路径声明或重启操作？

2 回复

在Flutter中加载本地图片，需将图片放入项目assets文件夹，并在pubspec.yaml中配置路径。例如：

flutter:
  assets:
    - assets/image.png

然后使用Image.asset('assets/image.png')加载。

更多关于flutter如何加载本地图片的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中加载本地图片，主要有以下步骤：

1. 在 pubspec.yaml 中声明图片资源

在 flutter 部分下添加 assets 配置：

flutter:
  assets:
    - assets/images/  # 声明整个目录
    - assets/icon.png  # 或声明单个文件

2. 创建目录并放入图片

在项目根目录创建 assets/images/ 文件夹，将图片放入其中。

3. 加载图片

使用 Image.asset() 加载图片：

Image.asset('assets/images/your_image.png')

4. 完整示例

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Image.asset('assets/images/flutter_logo.png'),
        ),
      ),
    );
  }
}

注意事项：

  • 修改 pubspec.yaml 后需执行 flutter pub get
  • 路径区分大小写
  • 可配置图片分辨率适配（如 image.png、2.0x/image.png、3.0x/image.png）

通过以上步骤即可成功加载本地图片。

回到顶部