Android WebView加载含IMG标签的HTML时图片不显示及样式缺失问题排查

咱们先把你遇到的问题根源拆解开，再给你修正后的代码示例：

为什么图片加载不出来？ #

你这里踩了一个很容易犯的坑：Html.fromHtml((String) article.getMain()).toString() 这一步会把HTML解析出来的富文本（包括图片对应的ImageSpan）直接转换成纯文本——toString()只会提取文字内容，所有和图片、样式相关的标签信息全丢了，WebView自然找不到图片资源了。

为什么span样式不生效？ #

和图片问题本质一样：Html.fromHtml解析后得到的Spanned对象里其实包含了<em>、<strong>还有span的样式标记，但调用toString()后，这些样式信息被彻底舍弃，只剩下光秃秃的文字，样式当然没法生效。

修正后的代码示例 #

核心思路就是：别把服务器返回的HTML转成纯文本，直接把原始HTML内容（先还原转义字符）插到你的HTML模板里。

mWebViewMainContent = view.findViewById(R.id.webview_article_content);
WebSettings settings = mWebViewMainContent.getSettings();
settings.setDefaultTextEncodingName("utf-8");
// 允许自动加载网络图片（如果图片是外链的话必须开这个）
settings.setLoadsImagesAutomatically(true);
// 静态HTML不需要JS的话可以关闭，更安全
settings.setJavaScriptEnabled(false);

StringBuilder sb = new StringBuilder();
sb.append("<HTML dir=\"rtl\" ><HEAD><LINK href=\"theCss.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body style=\"direction:rtl ;\" > ");
sb.append("<div class=\"article-page\">");

// 关键修正：还原服务器返回的转义HTML，直接插入模板
String originalEscapedHtml = (String) article.getMain();
// 把转义的HTML实体还原成正常标签，比如&lt;→<，&gt;→>
String decodedHtml = originalEscapedHtml.replace("&lt;", "<")
                                        .replace("&gt;", ">")
                                        .replace("&amp;", "&")
                                        .replace("&nbsp;", " ");
sb.append(decodedHtml);

sb.append("</div>");
sb.append("</body></HTML>");

mWebViewMainContent.loadDataWithBaseURL("file:///android_asset/", sb.toString(), "text/html", "utf-8", null);

额外提醒几点：

• 确保你的App已经申请了INTERNET权限，不然网络图片加载不了；
• 如果theCss.css放在assets目录下，loadDataWithBaseURL的第一个参数填"file:///android_asset/"是正确的，CSS能正常加载；
• 要是你想用Html.fromHtml解析后的样式，也可以用Html.toHtml(spanned)把Spanned对象转回HTML字符串，但这种方式可能会多生成一些冗余标签，不如直接用解码后的原始HTML准确。

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