如何在MAUI Blazor Hybrid Android中显示HTTP图片？

由于Blazor Hybrid依赖WebView渲染页面，原生MAUI的android:usesCleartextTraffic="true"设置仅对原生控件生效，WebView有独立的配置规则，以下是几种有效的实现方式：

方法1：配置WebView允许混合内容 #

Blazor Hybrid的页面由Android WebView承载，需要直接修改WebView的设置来允许加载HTTP资源（即使页面是HTTPS的）：

1. 打开Android项目下的Platforms/Android/MainApplication.cs
2. 在OnCreate方法中添加WebView配置逻辑，设置混合内容模式为允许：

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);

    var webViewSettings = Microsoft.Maui.Controls.Compatibility.Platform.Android.WebViewRenderer.WebViewSettings;
    webViewSettings.MixedContentMode = Android.Webkit.MixedContentHandling.AlwaysAllow;
    webViewSettings.AllowContentAccess = true;
}

如果需要自定义WebView渲染器，也可以这样实现：

[assembly: ExportRenderer(typeof(WebView), typeof(CustomWebViewRenderer))]
namespace YourApp.Platforms.Android
{
    public class CustomWebViewRenderer : WebViewRenderer
    {
        public CustomWebViewRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.Settings.MixedContentMode = Android.Webkit.MixedContentHandling.AlwaysAllow;
                Control.Settings.AllowContentAccess = true;
            }
        }
    }
}

方法2：使用原生MAUI Image控件替代Web的<img>标签 #

如果不想修改WebView配置，可以在Blazor组件中直接使用MAUI原生的Image控件，此时原生的android:usesCleartextTraffic="true"设置会生效：

1. 在Razor组件顶部添加引用：

@using Microsoft.Maui.Controls

2. 使用原生Image控件加载HTTP图片：

<Image Source="http://your-domain.com/image.jpg" WidthRequest="200" HeightRequest="200" />

注意：需确保AndroidManifest.xml中已正确设置android:usesCleartextTraffic="true"。

方法3：配置Android网络安全配置文件 #

创建更精细的网络安全规则，让WebView和原生控件都遵循该配置：

1. 在Android项目的Resources/xml目录下创建network_security_config.xml（若xml目录不存在则新建）：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <!-- 全局允许明文流量 -->
    <base-config cleartextTrafficPermitted="true" />
    <!-- 或者仅允许特定域名的明文流量（更安全） -->
    <!--
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">your-allowed-domain.com</domain>
    </domain-config>
    -->
</network-security-config>

2. 在AndroidManifest.xml的<application>标签中添加引用：

<application android:networkSecurityConfig="@xml/network_security_config">
    <!-- 其他原有配置 -->
</application>

这种方式比直接设置usesCleartextTraffic更灵活，也能被WebView识别。

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