flutter - 如何捕捉“无法加载资产：资产/图像/sample_img_url.png”

Question

有什么方法可以捕获 Flutter 中的“无法加载资产：assets/images/sample_img_url.png”错误？

我要做的是通过提供其路径（来自 API）来加载资产图像。但是，如果我没有与给定路径关联的图像，则需要加载示例图像。

我创建了一个自定义占位符小部件，如下所示。但它没有像我预期的那样工作。任何人都可以帮助我吗？

class ImagePlaceHolder extends StatelessWidget {
  final String path;
  final double width;

  const ImagePlaceHolder({Key key, this.path, this.width}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    Image finalImage;
    try{
      finalImage = Image.asset(
          path,
          width: width,
      );
    }
    catch(Exception){
      finalImage = Image.asset(
          "assets/images/app_update_logo.png",
          width: width,
      );
    }
    return finalImage;
  }
}

Answer 1

好的，最后我找到了一个非常好的方法来克服这个问题。只需使用错误生成器。

Image.asset(
     "assets/images/subjects/api_given_image_name.png",
     width: 90,
     errorBuilder: (BuildContext context, Object exception, StackTrace stackTrace) {
           return Image.asset(
                "assets/images/your_sample_image.png",
                width: 90,
           );
     },
)

Answer 2

只是一个快速更新的空安全答案：

Image.asset(
 "assets/images/subjects/api_given_image_name.png",
 width: 90,
 errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
       return Image.asset(
            "assets/images/your_sample_image.png",
            width: 90,
       );
 },
)

需要吗？在 StackTrace 之后或将神秘地错误。

Answer 3

您必须在 pubspec.yaml 中定义资产路径，如下所示：

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

要包含目录下的所有资产，请以 / 字符结尾指定目录名称：

flutter:
  assets:
    - directory/
    - directory/subdirectory/

官方文档： https ://flutter.dev/docs/development/ui/assets-and-images

Answer 4

我认为错误不应该在运行时解决。所以只指定现有的图像路径。如果您在指定路径中没有图像，则不应使用它。

但。如果您仍然想首先捕获异常，您应该了解 Image.asset 是异步工作的。稍后抛出异常，这就是您无法捕获它的原因。看看这个 GitHub问题，希望对您有所帮助。

Answer 5

您无需捕获该异常即可实现您想要的。您可以使用errorBuilder函数返回您喜欢的任何小部件。

      Image.asset(
        "assets/images/app_update_logo.png",
        width: width,
        errorBuilder: (context, error, stackTrace) {
          return Image.asset(
            "assets/images/error_logo.png",
            width: width,
          );
        },
      );

祝你好运！