扑打后卫资产图像

Question

如果我要访问的资产映像无法加载，我想要后备资产图像。

如果此代码： image（image：AssetImage（'images/myimage.png'））引发错误，我想显示一个后备，例如 image image（image：aSsetImage：'' images/halldackimage.png'））'。

我阅读 /a>，但这对我不起作用。使用自定义资产捆绑包，即使现有图像也没有加载。

Answer 1

您可以使用 errorbuilder 属性：

如果在图像加载期间发生错误，则调用一个构建器函数。

在您的情况下（null Safe）：

Image(
      image: AssetImage('path/to/image.jpg'),
      errorBuilder:
          (BuildContext context, Object exception, StackTrace? stackTrace) {
        return Image(
            image: AssetImage('path/to/fallback.jpg'));
      },
    )

---

这是一个完整的示例，直接从文档：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: Scaffold(
        body: Center(
          child: MyStatelessWidget(),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(),
        borderRadius: BorderRadius.circular(20),
      ),
      child: Image.network(
        'https://example.does.not.exist/image.jpg',
        errorBuilder:
            (BuildContext context, Object exception, StackTrace? stackTrace) {
          // Appropriate logging or analytics, e.g.
          // myAnalytics.recordError(
          //   'An error occurred loading "https://example.does.not.exist/image.jpg"',
          //   exception,
          //   stackTrace,
          // );
          return const Text('ð¢');
        },
      ),
    );
  }
}