You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter使用AssetImage加载图片无报错但图片不显示求助

Flutter AssetImage加载本地图片不显示解决方案

排查修复步骤

  • 修正资源路径拼写错误:你当前代码中写的AssetImage('imagesananth.JPG')存在路径拼写错误,大概率是漏写了目录分隔符,修正为AssetImage('images/ananth.JPG')即可,注意Flutter对资源路径大小写敏感,路径拼写必须和实际文件路径、文件名完全一致。
  • 检查pubspec.yaml资源配置:必须在项目根目录的pubspec.yaml文件中声明要加载的资源,找到flutter配置节点,按如下格式配置:
flutter:
  uses-material-design: true
  # 资源声明配置
  assets:
    # 单个文件声明
    - images/ananth.JPG
    # 若需批量加载images目录下所有资源,可直接配置目录
    # - images/
  • 检查资源目录结构:确认项目根目录下存在images文件夹,且目标图片文件存放在该文件夹内,注意images文件夹需要和lib目录同级,不要放在lib目录内部。
  • 刷新资源缓存:修改完配置后执行flutter clean清除项目缓存,再执行flutter pub get重新加载资源配置,之后重新运行项目即可生效。
  • 控制台输出的splash screen废弃警告和图片加载逻辑无关,不会导致图片无法显示,无需针对该警告处理图片相关配置。

修正后的代码示例

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            backgroundColor: Colors.teal,
            body: Column(
              children: [
                Container(
                  height: 100,
                  child: const CircleAvatar(
                    backgroundImage: AssetImage('images/ananth.JPG'),
                  ),
                )
              ],
            )));
  }
}

内容的提问来源于stack exchange,提问作者Bhrugu

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.25 04:24:08