Xamarin.Forms中渲染含Base64图片的HTML内容问题求助

核心原因 #

Xamarin.Forms的Label控件开启TextType="Html"后，仅支持有限的HTML标签（如<b>、<i>、<a>），完全不支持<img>标签（不管是base64编码还是远程URL图片），这就是图片显示为小方块的根本原因。要实现完整的HTML渲染（包括图片、链接），必须替换为WebView控件。

具体修改步骤 #

1. 替换XAML中的Label为WebView

删除原有的Label代码，改用WebView：

<WebView 
    Source="{Binding HtmlQuestionSource}" 
    HeightRequest="Auto"
    Navigating="WebView_Navigating" />

2. 在ViewModel中添加HTML绑定源

需要先解码后端返回的转义HTML字符串，再包装为HtmlWebViewSource，同时保持原有的字体、行高、颜色样式：

// 引入命名空间：using Xamarin.Forms;
public HtmlWebViewSource HtmlQuestionSource
{
    get
    {
        // 解码后端返回的转义HTML（比如把&lt;img转成<img>）
        var decodedHtml = System.Net.WebUtility.HtmlDecode(CurrentQuestion.Question);
        
        // 把原Label的样式用CSS实现
        var navyColor = (Color)Application.Current.Resources["OIANavy1"];
        var hexColor = $"{(int)(navyColor.R * 255):X2}{(int)(navyColor.G * 255):X2}{(int)(navyColor.B * 255):X2}";

        return new HtmlWebViewSource
        {
            Html = $@"
            <html>
                <body style='margin:0; padding:0; font-size:14px; line-height:1.43; color:#{hexColor};'>
                    {decodedHtml}
                </body>
            </html>"
        };
    }
}

3. 处理WebView中的链接点击

在页面的代码后台（如对应的.xaml.cs文件）添加Navigating事件，拦截链接并调用系统浏览器打开：

private async void WebView_Navigating(object sender, WebNavigatingEventArgs e)
{
    // 仅拦截HTTP/HTTPS链接
    if (e.Url.StartsWith("http://") || e.Url.StartsWith("https://"))
    {
        e.Cancel = true; // 阻止WebView内部加载链接
        await Browser.OpenAsync(e.Url, BrowserLaunchMode.SystemPreferred);
    }
}

4. 清理冗余代码

原ViewModel中的HtmlLinkOpenClicked方法可以直接删除，因为WebView的Navigating事件已经更可靠地处理了链接跳转，无需手动解析HTML中的href属性。

额外说明 #

• 后端返回的HTML字符串包含转义字符（如<、"），必须用WebUtility.HtmlDecode解码后，WebView才能正确识别标签。
• WebView会自动渲染base64编码的图片，无需额外处理本地存储或网络请求。

内容的提问来源于stack exchange，提问作者Yajush Pratap Singh