Flutter如何加载本地图片

在Flutter项目中，我想加载本地图片资源，但不知道具体该怎么做。图片已经放在项目的assets文件夹里，pubspec.yaml文件也配置了，但运行时还是报错找不到图片路径。请问正确的配置步骤是什么？需要特别注意哪些细节？比如路径格式、是否需要重启应用等。

2 回复

在Flutter中加载本地图片，步骤如下：

  1. 将图片放入项目assets/images目录。
  2. 在pubspec.yaml中声明资源路径：
    flutter:
  assets:
    - assets/images/
  3. 使用Image.asset('assets/images/图片名.png')加载图片。

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


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

1. 准备图片资源

将图片文件（如PNG、JPG等）放置在项目的 assets/images 目录中（如无此目录可手动创建）。

2. 配置 pubspec.yaml 文件

在 flutter 部分添加 assets 配置，指定图片路径：

flutter:
  assets:
    - assets/images/your_image.png
    # 或加载整个目录：
    - assets/images/

3. 使用 Image.asset 加载图片

在代码中通过 Image.asset 组件加载：

Image.asset(
  'assets/images/your_image.png',
  width: 200,    // 可选：设置宽度
  height: 200,   // 可选：设置高度
  fit: BoxFit.cover, // 可选：图片填充方式
)

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、image@2x.png、image@3x.png）

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

回到顶部