Flutter图像未显示

Question

我试图制作一个带有图片背景的页面，以下是我的代码：

body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("loginBackground"),
          ),
        )
      ),

然而，当我运行它时，它会打开一个新的编辑器，其中包含一些Flutter的代码，并且有一行被黄色高亮显示，我认为这意味着断点（如果我错了请纠正我）。文件名是'image_provider.dart'，这是相关的代码（我已经指出了高亮显示的行）：

@protected
  Future<ui.Codec> _loadAsync(AssetBundleImageKey key, DecoderCallback decode) async {
    ByteData? data;
    // Hot reload/restart could change whether an asset bundle or key in a
    // bundle are available, or if it is a network backed bundle.
    try {
      data = await key.bundle.load(key.name);
    } on FlutterError {
      PaintingBinding.instance!.imageCache!.evict(key);


      rethrow;          // THIS IS THE HIGHLIGHTED LINE

    }
    // `key.bundle.load` has a non-nullable return type, but might be null when
    // running with weak checking, so we need to null check it anyway (and
    // ignore the warning that the null-handling logic is dead code).
    if (data == null) { // ignore: dead_code
      PaintingBinding.instance!.imageCache!.evict(key);
      throw StateError('Unable to read data');
    }
    return await decode(data.buffer.asUint8List());
  }
}

我不知道这意味着什么，所以非常感谢任何帮助。

这是图片（滚动）：

（很抱歉它太大了）如果您需要更多细节，请评论：）

- LWB

---

请确保您已正确指定了资产的文件路径，并包括文件扩展名。同时，不要忘记在pubspec.yaml中指定资产文件夹。请参阅https://flutter.dev/docs/development/ui/assets-and-images。 - Wessel

为图像添加扩展名，例如 jpg/png 等。另外，请尝试在 VSCode 中以非调试模式运行并发布您看到的错误。 - Aman Verma

Answer 1

在`assetImage`中，通常语法如下：

```image: AssetImage("images/loginBackground.png")```

如果您没有在`pubspec.yaml`文件中启用资产，可以通过在资产部分执行以下操作来实现：

 assets:
    - images/

同时提供一些错误代码也会有所帮助。

- Fahmi Sawalha

Answer 2

尝试使用AssetImage('assets/loginBackground.png')，假设您在项目中创建了一个包含所有图像的assets文件夹。 您还需要在pubspec.yaml文件中指定：

assets: - assets/

- Nathan Miranda