如何在Android WebView中显示drawable文件夹内的Vector Drawable？

我之前也碰到过这个问题——WebView没法直接通过file:///android_res/drawable/vector_example.xml这种路径加载VectorDrawable，因为它会把XML文件当成纯文本处理，不会解析成图片。下面分享几个亲测有效的解决方案，你可以根据自己的场景选：

方案1：把VectorDrawable转成Base64字符串嵌入HTML #

这个方法的思路是把VectorDrawable转换成Bitmap，再编码成Base64格式，直接嵌入到HTML的<img>标签里，WebView就能正常识别了。

步骤如下：

1. 获取VectorDrawable资源：

val vectorDrawable = ContextCompat.getDrawable(context, R.drawable.your_vector_drawable) as VectorDrawable

2. 将Drawable转换为Bitmap：

val bitmap = Bitmap.createBitmap(
    vectorDrawable.intrinsicWidth,
    vectorDrawable.intrinsicHeight,
    Bitmap.Config.ARGB_8888
)
val canvas = Canvas(bitmap)
vectorDrawable.setBounds(0, 0, canvas.width, canvas.height)
vectorDrawable.draw(canvas)

3. 把Bitmap编码成Base64字符串：

val outputStream = ByteArrayOutputStream()
bitmap.compress(Bitmap.CompressFormat.PNG, 100, outputStream)
val base64Image = Base64.encodeToString(outputStream.toByteArray(), Base64.DEFAULT)

4. 最后在HTML里使用：

<img src="data:image/png;base64,${base64Image}" />

方案2：直接把VectorDrawable的XML转成SVG嵌入HTML #

VectorDrawable本质是SVG的一个子集，你可以直接把drawable里的Vector XML内容提取出来，转换成标准SVG格式后嵌入HTML，WebView原生支持SVG渲染。

举个例子，假设你的vector_example.xml内容是：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#FF4081"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,17c-2.76,0 -5,-2.24 -5,-5s2.24,-5 5,-5 5,2.24 5,5 -2.24,5 -5,5zM12,9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3 3,-1.34 3,-3 -1.34,-3 -3,-3z" />
</vector>

把它改成标准SVG（替换android:前缀为SVG原生属性），然后直接放到HTML里：

<svg width="24" height="24" viewBox="0 0 24 24">
    <path fill="#FF4081" d="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,17c-2.76,0 -5,-2.24 -5,-5s2.24,-5 5,-5 5,2.24 5,5 -2.24,5 -5,5zM12,9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3 3,-1.34 3,-3 -1.34,-3 -3,-3z" />
</svg>

这种方法不需要额外的代码处理，适合静态展示的场景。

方案3：用WebViewAssetLoader拦截请求并转换（API 24+） #

如果你的App最低版本是API 24及以上，可以用WebViewAssetLoader来拦截WebView的图片请求，自动把VectorDrawable转换成Bitmap返回，这样HTML里的路径会更简洁。

1. 先添加依赖：

implementation 'androidx.webkit:webkit:1.6.0'

2. 创建自定义的路径处理器：

class VectorDrawableHandler(private val context: Context) : WebViewAssetLoader.PathHandler {
    override fun handle(path: String): WebResourceResponse? {
        // 从路径中获取drawable名称
        val drawableName = path.removePrefix("/")
        val drawableId = context.resources.getIdentifier(drawableName, "drawable", context.packageName)
        if (drawableId == 0) return null

        // 加载VectorDrawable并转成Bitmap
        val vectorDrawable = ContextCompat.getDrawable(context, drawableId) as? VectorDrawable ?: return null
        val bitmap = Bitmap.createBitmap(
            vectorDrawable.intrinsicWidth,
            vectorDrawable.intrinsicHeight,
            Bitmap.Config.ARGB_8888
        )
        val canvas = Canvas(bitmap)
        vectorDrawable.setBounds(0, 0, canvas.width, canvas.height)
        vectorDrawable.draw(canvas)

        // 返回Bitmap的流
        val outputStream = ByteArrayOutputStream()
        bitmap.compress(Bitmap.CompressFormat.PNG, 100, outputStream)
        return WebResourceResponse(
            "image/png",
            "UTF-8",
            ByteArrayInputStream(outputStream.toByteArray())
        )
    }
}

3. 配置WebView：

val assetLoader = WebViewAssetLoader.Builder()
    .addPathHandler("/vectors/", VectorDrawableHandler(this))
    .build()

webView.webViewClient = object : WebViewClientCompat() {
    override fun shouldInterceptRequest(
        view: WebView,
        request: WebResourceRequest
    ): WebResourceResponse? {
        return assetLoader.shouldInterceptRequest(request.url)
    }
}

4. 在HTML里使用：

<img src="https://appassets.androidplatform.net/vectors/your_vector_drawable" />

这个方法适合需要批量处理VectorDrawable的场景，HTML代码更干净。

总结一下，WebView本身不支持直接加载本地VectorDrawable的XML文件，所以必须通过转换格式或者拦截请求的方式来实现渲染。上面三个方案各有优缺点，你可以根据自己的需求来选择~

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