Flutter Web加载资源失败求助：无法加载图片资产问题

正在学习Flutter Web，尝试加载图片资产时遇到错误，即使遵循常规加载流程，仍弹出“Unable to load asset”提示。以下是问题详情、代码片段及文件结构：

代码片段与文件结构 #

lib/main.dart #

import 'package:dogs/profile_screen.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ProfileScreen(),
    );
  }
}

lib/profile_screen.dart #

import 'package:flutter/material.dart';

class ProfileScreen extends StatelessWidget {
  const ProfileScreen({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: const [
          ProfileImage(),
          ProfileDetails(),
          ProfileActions(),
        ],
      ),
    );
  }
}

class ProfileImage extends StatelessWidget {
  const ProfileImage({super.key});
  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Image.asset(
        width: 200,
        height: 200,
        'assets/dog1.jpg',
        fit: BoxFit.fitWidth,
      ),
    );
  }
}

class ProfileDetails extends StatelessWidget {
  const ProfileDetails({super.key});
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            'Wolfram Barkovich',
            style: TextStyle(fontSize: 35, fontWeight: FontWeight.w600),
          ),
          _buildDetailsRow('Age', '4'),
          _buildDetailsRow('Status', 'Good Boy'),
        ],
      ),
    );
  }

  Widget _buildDetailsRow(String heading, String value) {
    return Row(
      children: [
        Text(
          '$heading: ',
          style: const TextStyle(fontWeight: FontWeight.bold),
        ),
        Text(value),
      ],
    );
  }
}

class ProfileActions extends StatelessWidget {
  const ProfileActions({super.key});
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        _buildIcon(Icons.restaurant, 'Feed'),
        _buildIcon(Icons.favorite, 'Pet'),
        _buildIcon(Icons.directions_walk, 'Walk'),
      ],
    );
  }

  Widget _buildIcon(IconData icon, String text) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        children: <Widget>[
          Icon(icon, size: 40),
          Text(text),
        ],
      ),
    );
  }
}

pubspec.yaml #

assets:
  - assets/

资产目录内容 #

$ ls -1 assets/
dog1.jpg
khachik-simonian-nXOB-wh4Oyc-unsplash.jpg

错误信息 #

Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...
This app is linked to the debug service: ws://127.0.0.1:38105/pGd3EEhWs90=/ws
Debug service listening on ws://127.0.0.1:38105/pGd3EEhWs90=/ws
Debug service listening on ws://127.0.0.1:38105/pGd3EEhWs90=/ws
Error while trying to load an asset: Flutter Web engine failed to fetch "assets/assets/dog1.jpg". HTTP request succeeded, but the server responded with HTTP status 404.

======== Exception caught by image resource service ================================================
The following assertion was thrown resolving an image codec:
Unable to load asset: "assets/dog1.jpg".

The asset does not exist or has empty data.
When the exception was thrown, this was the stack: 
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 297:3  throw_
packages/flutter/src/services/asset_bundle.dart 324:9                        <fn>
dart-sdk/lib/async/zone.dart 1661:54                                         runUnary
dart-sdk/lib/async/future_impl.dart 162:18                                   handleValue
dart-sdk/lib/async/future_impl.dart 838:44                                   handleValueCallback
dart-sdk/lib/async/future_impl.dart 867:13                                   _propagateToListeners
dart-sdk/lib/async/future_impl.dart 643:5                                    [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 713:7                                    callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                             _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                              _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7           <fn>
Image provider: AssetImage(bundle: null, name: "assets/dog1.jpg")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#d5033(), name: "assets/dog1.jpg", scale: 1)
====================================================================================================

解决方法 #

核心问题修正 #

错误日志显示Flutter尝试请求assets/assets/dog1.jpg，这是因为路径拼接重复：

• pubspec.yaml中配置assets: - assets/，已将assets/目录下所有文件注册为资产，路径前缀默认包含assets/
• 你在Image.asset中又写了'assets/dog1.jpg'，导致最终路径变成assets/assets/dog1.jpg，实际不存在

将ProfileImage组件中的Image.asset路径修改为'dog1.jpg'即可：

ClipOval(
  child: Image.asset(
    width: 200,
    height: 200,
    'dog1.jpg', // 去掉前面的assets/
    fit: BoxFit.fitWidth,
  ),
)

辅助排查步骤 #

1. 检查pubspec.yaml缩进：确保assets:下的条目使用两个空格缩进，YAML对缩进格式要求严格，不能用Tab键
2. 清理缓存并重启项目：
   • 停止当前运行的服务
   • 执行命令：flutter clean
   • 重新运行：flutter run -d chrome
3. 确认文件名大小写：Flutter Web对文件名大小写敏感，确保代码中的文件名与实际文件完全一致（比如dog1.jpg不能写成Dog1.jpg）

内容的提问来源于stack exchange，提问作者user3523406