Flutter 图像未显示：“无法加载资产”

Question

我没有在我的应用程序中看到我的图像，而是看到一个带有 X 的红色框，上面写着Unable to load asset: images/aboutmaggie.png.

我制作了一个带有子目录images的目录assets 。 目录assets与pubspec.yaml处于同一级别。

我将图像放入images目录。 当我在 Android Studio 中单击图像时，图像会显示。

在pubspec.yaml我有这些行：

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/

我添加了

class AboutRoute extends StatelessWidget {
  const AboutRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Kabbalistic Numerology'),
        ),
        body: ListView(
            shrinkWrap: true,
            padding: const EdgeInsets.all(8),
            children: <Widget>[
              RichText(
                text: TextSpan(
                  children: <TextSpan>[
                    TextSpan(
                        text: 'About Maggie McPherson',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.black,
                        )),
                  ],
                ),
                textAlign: TextAlign.center,
              ),
              RichText(
                text: TextSpan(
                  children: <TextSpan>[
                    TextSpan(
                        text:
                            "Dr. Leslie Margaret Perrin McPherson...",
                        style: TextStyle(
                          color: Colors.black,
                        )),
                  ],
                ),
              ),
              Image.asset('images/aboutmaggie.png'), // <--this image doesn't load
            ]));
  }
}

我跑了flutter pub get 。 我运行工具 > Flutter > Flutter 清洁。 我关闭并重新启动了 Android Studio。

错误信息是：

======== Exception caught by image resource service ================================================
The following assertion was thrown resolving an image codec:
Unable to load asset: images/aboutmaggie.png

我尝试将另一个图像放入assets/images并调用它，但第二个图像也不会加载。

这张照片有什么问题？

Answer 1

试试这样：

Image.asset('assets/images/aboutmaggie.png'),

Answer 2

调用图像时出错，

更改代码中的这一行

Image.asset('images/aboutmaggie.png')

到这条线

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

我希望这会有所帮助，谢谢

Answer 3

试试下面的代码希望它对你有帮助。

请参阅此处的文档以添加资产和图像

在此处参考图像 Class

您的文件夹结构

project directory
   - assets
       - images
          - your_image.png

您的pubspec.yaml文件

flutter:
  assets:
    - assets/images/

您的小部件：

   Image.asset(
        'assets/images/ln.png',//just change your image to my image
        height: 150,
        //width: 100,
      ),

注意- 如果您添加了正确的代码和详细信息，那么您的问题未解决然后停止（退出）项目/应用程序并重新启动

结果屏幕->

Answer 4

这是缓存问题。 昨晚我试过

Image.asset('assets/images/aboutmaggie.png'),

但这没有用。 今天早上我启动了 Android Studio，它问，

pubspec.yaml has changed. Do you want to run flutter pub get?

嗯，这很奇怪。 我刚刚开始 Android Studio。 我没有改变任何东西。 我将路径改回'assets/images/aboutmaggie.png' ，运行flutter pub get ，进行热重启并出现图像。

然后我打开pubspec.yaml并将其更改为

  assets:
    - assets/bowlingballs/

我跑了flutter clean ， flutter pub get ，又热启动了，图像继续出现。

我将路径改回'images/aboutmaggie.png' ，运行flutter pub get ，进行热重启，图像消失了。

我的结论是，如果你改变这条路

Image.asset('assets/images/aboutmaggie.png'),

然后运行flutter pub get并热重启，然后将出现更改。 但是，如果您对pubspec.yaml进行更改，则在清除某些缓存之前您不会看到更改。 我昨晚遇到的问题是，当我设置pubspec.yaml时，我在assets之前有一个额外的空间。 该版本的pubspec.yaml被缓存，后续版本的pubspec.yaml被忽略。 flutter clean清除构建缓存，但pubspec.yaml显然不在构建缓存中。 pubspec.yaml必须缓存在其他地方。

Answer 5

在您的终端中，运行flutter clean以清除缓存，然后运行flutter pub get for flutter 重新获取您的资产文件夹

这对我有用

Answer 6

您需要提供图像的完整路径。 将Image.asset('images/aboutmaggie.png')替换为Image.asset('assets/images/aboutmaggie.png') 。