UWP无网络环境下设置ImageSource异常问题排查与处理

UI包含下拉框和图片组件：

• 初始默认选中下拉框Item A，对应显示Image A
• 首次加载UI时网络已断开，但仍能正常显示Image A
• 切换选中下拉框Item B时，无法显示对应的Image B

现有代码实现 #

UI代码 #

<Image source= "{x:bind Viewmodel.SampleImage}, mode=OneWay">
</Image>

后端代码 #

private ImageSource sampleImage;
public ImageSource SampleImage
{
   get => this.sampleImage;
   set => this.SetProperty(ref this.sampleImage, value);
 }

public void Initialize()
{
   // 每次切换下拉框选项时触发此方法，尝试设置UI显示的图片
    BitmapImage fallbackImage = new BitmapImage(new Uri("https://randomImage"));
    this.SampleImage = fallbackImage;
 }

1. 初始Image A能显示的原因：Image A对应的ImageSource是本地嵌入资源或已缓存的资源，不需要实时网络请求即可读取——即使首次加载时网络断开，也能从本地读取。
2. 切换后Image B无法显示的原因：切换时调用Initialize方法创建的BitmapImage指向网络Uri，无网络时无法完成异步加载，且未设置加载失败的 fallback 处理逻辑，导致Image控件没有有效内容可显示。

方案1：监听图片加载失败事件，设置临时占位 #

通过监听BitmapImage的ImageFailed事件，在加载失败时设置替代内容（比如纯色背景、复用初始的Image A）：

public void Initialize()
{
    BitmapImage networkImage = new BitmapImage(new Uri("https://randomImage"));
    // 绑定加载失败事件
    networkImage.ImageFailed += (sender, e) =>
    {
        // 加载失败时，复用初始的Image A作为占位
        this.SampleImage = GetInitialImageA();
        // 或者用纯色Brush作为占位（无需本地图片）
        // this.SampleImage = new SolidColorBrush(Colors.LightGray) as ImageSource;
    };
    this.SampleImage = networkImage;
}

// 返回初始的Image A对应的ImageSource
private ImageSource GetInitialImageA()
{
    return new BitmapImage(new Uri("ms-appx:///Assets/ImageA.png"));
}

方案2：先判断网络状态再处理加载逻辑 #

先检测当前网络连接状态，无网络时直接显示占位内容；有网络时再尝试加载网络图片：

using Windows.Networking.Connectivity;

public async void Initialize()
{
    // 判断当前网络状态
    ConnectionProfile profile = NetworkInformation.GetInternetConnectionProfile();
    bool hasInternet = profile?.GetNetworkConnectivityLevel() == NetworkConnectivityLevel.InternetAccess;

    if (hasInternet)
    {
        BitmapImage networkImage = new BitmapImage(new Uri("https://randomImage"));
        networkImage.ImageFailed += (sender, e) => 
        {
            // 即使有网络也可能加载失败，仍需设置占位
            this.SampleImage = GetInitialImageA();
        };
        this.SampleImage = networkImage;
    }
    else
    {
        // 无网络时直接显示占位
        this.SampleImage = GetInitialImageA();
    }
}

方案3：自定义Image控件封装失败逻辑 #

创建自定义Image控件，内置加载失败的默认占位行为，避免重复编写事件处理：

public class CustomImage : Image
{
    public ImageSource FallbackSource
    {
        get => (ImageSource)GetValue(FallbackSourceProperty);
        set => SetValue(FallbackSourceProperty, value);
    }

    public static readonly DependencyProperty FallbackSourceProperty =
        DependencyProperty.Register(nameof(FallbackSource), typeof(ImageSource), typeof(CustomImage), new PropertyMetadata(null));

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        if (Source is BitmapImage bitmap)
        {
            bitmap.ImageFailed += Bitmap_ImageFailed;
        }
    }

    private void Bitmap_ImageFailed(object sender, ExceptionRoutedEventArgs e)
    {
        Source = FallbackSource;
    }
}

使用时在XAML中指定FallbackSource：

<local:CustomImage Source="{x:bind Viewmodel.SampleImage, Mode=OneWay}"
                   FallbackSource="{x:bind Viewmodel.InitialImageA}">
</local:CustomImage>

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