Android WebView 載入圖片網址顯示空白的排查指南

現象描述

使用 WebView 載入包含單張圖片的 URL（如微信二維碼連結）時，畫面一片空白，無任何錯誤提示。

常見原因與解決方案

1. 確認 URL 可訪問性
   先在手機瀏覽器或電腦瀏覽器中直接打開該 URL，確認圖片能正常顯示。若瀏覽器也無法打開，則屬於伺服器或網路問題，非 App 端故障。
2. 啟用 JavaScript 與圖片載入
   確保 WebSettings 中已開啟：

   webview.getSettings().setJavaScriptEnabled(true);
   webview.getSettings().setLoadsImagesAutomatically(true);
   

3. 處理 HTTPS 與 SSL 錯誤
   若目標為 HTTPS，需在 WebViewClient 中覆寫 onReceivedSslError 並呼叫 handler.proceed() 忽略憑證錯誤（僅限測試環境，生產環境請妥善驗證憑證）。
4. 設定 User-Agent 與 Referer
   部分圖床會檢查 Referer 或 User-Agent，可透過 webview.loadUrl(url, headers) 傳入自定義 Header。
5. 允許混合內容 (API 21+)
   webview.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

完整範例程式碼

WebView webview = findViewById(R.id.webView1);
WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true);
settings.setLoadsImagesAutomatically(true);
settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

webview.setWebViewClient(new WebViewClient() {
    @Override
    public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
        handler.proceed(); // 僅供測試
    }
});

webview.loadUrl("https://example.com/image.png");

除錯技巧

• 開啟 WebView.setWebContentsDebuggingEnabled(true) 並在 Chrome 輸入 chrome://inspect 進行遠端除錯。
• 覆寫 onReceivedError 記錄錯誤碼與描述。