如何从API获取图像字符串并在UWP应用的XAML中正常显示

你遇到的问题核心是UWP的Image.Source属性不支持直接绑定Base64格式的字符串，你需要将API返回的Base64图像字符串转换为BitmapImage类型后再绑定，下面是两种可落地的实现方案：

方案1：使用IValueConverter（推荐，无需修改原有数据逻辑） #

步骤1：新建Base64到ImageSource的转换器类 #

using System;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Media.Imaging;
using System.IO;

public class Base64ToImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value == null || !(value is string base64String))
            return null;
            
        // 处理带data URI前缀的情况（比如data:image/png;base64,xxxx）
        if (base64String.StartsWith("data:image"))
        {
            base64String = base64String.Substring(base64String.IndexOf(',') + 1);
        }

        try
        {
            byte[] buffer = Convert.FromBase64String(base64String);
            using (var stream = new MemoryStream(buffer))
            {
                var bitmap = new BitmapImage();
                stream.Position = 0;
                bitmap.SetSource(stream.AsRandomAccessStream());
                return bitmap;
            }
        }
        catch
        {
            return null;
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

步骤2：在XAML页面中引入转换器资源 #

在你的Page标签内添加资源声明：

<Page.Resources>
    <local:Base64ToImageConverter x:Key="Base64ToImageConverter"/>
</Page.Resources>

步骤3：修改Image的绑定逻辑，加上转换器 #

<Image Source="{Binding ImageFile, Converter={StaticResource Base64ToImageConverter}}"/>

方案2：修改Games模型类，新增BitmapImage类型的绑定属性 #

步骤1：修改Games类，新增ImageSource属性 #

public class Games
{
    public string Name { get; set; }
    public string ImageFile { get; set; }
    
    private BitmapImage _imageSource;
    public BitmapImage ImageSource
    {
        get
        {
            if (_imageSource == null && !string.IsNullOrEmpty(ImageFile))
            {
                string base64String = ImageFile;
                if (base64String.StartsWith("data:image"))
                {
                    base64String = base64String.Substring(base64String.IndexOf(',') + 1);
                }
                try
                {
                    byte[] buffer = Convert.FromBase64String(base64String);
                    using (var stream = new MemoryStream(buffer))
                    {
                        _imageSource = new BitmapImage();
                        stream.Position = 0;
                        _imageSource.SetSource(stream.AsRandomAccessStream());
                    }
                }
                catch
                {
                    _imageSource = null;
                }
            }
            return _imageSource;
        }
    }
}

步骤2：修改XAML的Image绑定，绑定到新属性 #

<Image Source="{Binding ImageSource}"/>

注意事项 #

• 确保你的UWP项目已经开启了互联网（客户端）权限，可在Package.appxmanifest的功能选项卡中勾选
• 如果API返回的图像Base64过大，建议加异步加载逻辑避免阻塞UI线程

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