如何在Jetpack Compose的TextView中显示HTML内嵌图片？

针对你使用HtmlText（来自ireward/compose-html）无法显示图片的问题，可以通过HTML解析+Compose组件组合渲染的方式解决，以下是具体实现步骤：

方案一：解析HTML内容，拆分文本与图片单独渲染 #

这种方式通过解析HTML提取文本和图片URL，再用Compose原生的Text和图片加载组件（如Coil的AsyncImage）分别渲染，兼容性和可控性更强。

1. 引入必要依赖 #

在项目配置中添加HTML解析工具和图片加载库：

// build.gradle.kts 或 build.gradle
implementation("org.jsoup:jsoup:1.17.2")
implementation("io.coil-kt:coil-compose:2.4.0")

2. 编写HTML解析逻辑 #

解析目标HTML，将内容拆分为文本节点和图片节点：

// 定义内容节点密封类，区分文本和图片
sealed class ContentNode {
    data class TextNode(val content: String) : ContentNode()
    data class ImageNode(val url: String) : ContentNode()
}

// 解析HTML的工具方法
fun parseHtmlToContentNodes(html: String): List<ContentNode> {
    val contentNodes = mutableListOf<ContentNode>()
    val doc = Jsoup.parse(html)
    
    // 遍历所有段落元素
    doc.select("p").forEach { pElement ->
        val textBuffer = StringBuilder()
        
        // 遍历段落内的所有子节点
        pElement.childNodes().forEach { node ->
            when {
                // 处理纯文本节点
                node is org.jsoup.nodes.TextNode -> {
                    textBuffer.append(node.text())
                }
                // 处理a标签，判断是否为图片链接
                node is org.jsoup.nodes.Element && node.tagName() == "a" -> {
                    val href = node.attr("href")
                    val isImage = href.endsWith(".jpg") || href.endsWith(".png") || href.endsWith(".webp")
                    
                    if (isImage) {
                        // 先添加之前积累的文本
                        if (textBuffer.isNotEmpty()) {
                            contentNodes.add(ContentNode.TextNode(textBuffer.toString()))
                            textBuffer.clear()
                        }
                        // 添加图片节点
                        contentNodes.add(ContentNode.ImageNode(href))
                    } else {
                        // 普通链接，将链接文本加入缓冲区
                        textBuffer.append(node.text())
                    }
                }
            }
        }
        
        // 添加段落剩余的文本
        if (textBuffer.isNotEmpty()) {
            contentNodes.add(ContentNode.TextNode(textBuffer.toString()))
        }
    }
    
    return contentNodes
}

3. 编写Compose渲染组件 #

将解析后的节点列表渲染为文本和图片的组合：

@Composable
fun HtmlWithEmbeddedImages(htmlContent: String) {
    // 缓存解析结果，避免重组时重复解析
    val contentNodes = remember(htmlContent) {
        parseHtmlToContentNodes(htmlContent)
    }
    
    Column(modifier = Modifier.padding(16.dp)) {
        contentNodes.forEach { node ->
            when (node) {
                is ContentNode.TextNode -> {
                    Text(
                        text = node.content,
                        modifier = Modifier.padding(vertical = 4.dp)
                    )
                }
                is ContentNode.ImageNode -> {
                    AsyncImage(
                        model = node.url,
                        contentDescription = "内嵌图片",
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(vertical = 8.dp),
                        contentScale = ContentScale.Fit
                    )
                }
            }
        }
    }
}

4. 使用组件 #

直接传入你的HTML内容即可：

HtmlWithEmbeddedImages(
    htmlContent = "<p>This is text and this is an image <a href=\"http://www.example.com/image.jpg\" rel=\"noreferrer\">http://www.example.com/image.jpg</a>.</p>"
)

方案二：扩展HtmlText的标签处理器（局限性较大） #

如果你想基于原HtmlText扩展，可以自定义TagHandler处理图片相关标签，但由于Compose的Text组件对ImageSpan支持有限，渲染效果可能不如方案一，仅作参考：

class ImageLinkTagHandler : TagHandler {
    override fun handleTag(
        opening: Boolean,
        tag: String,
        output: Editable,
        xmlReader: XmlReader
    ) {
        if (!opening && tag.equals("a", ignoreCase = true)) {
            val href = xmlReader.getAttributeValue(null, "href")
            if (href?.endsWith(".jpg") == true) {
                // 尝试用ImageSpan替换链接文本，但Compose中需额外处理，效果不稳定
            }
        }
    }
}

使用时将自定义处理器传入HtmlText：

HtmlText(
    html = yourHtmlContent,
    tagHandlers = mapOf("a" to ImageLinkTagHandler())
)

推荐使用方案一，可以完全控制图片的加载、样式和布局，避免HtmlText本身的限制。

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