安卓：如何将矢量图像加载到Webview中？

Question

抱歉，如果这是重复的问题，但我已经认真搜索了，没有发现这个问题被提出过...

所以在 Android 古老的日子里，你可以直接将以下内容添加到 WebView 的源 HTML 中：

<img src='file:///android_res/drawable/my.png'/>

它可以在WebView中正确显示我的.png文件。但是，现在Android支持（并且更喜欢我们使用）这些新潮的矢量可绘制图形，而Android Studio的Vector Asset Studio使从SVG文件或其他文件导入它们变得非常容易。

伟大的事情是，为了向后兼容性，在构建过程中会自动生成各种dpi /屏幕大小的.png图像以支持旧设备。因此，如果您的目标是旧设备，则存在.png图像。

如果我能够找到它们就好了。因为据我所知，使用矢量图形确实会破坏那些在WebViews中的file:///android_res/drawable/ img链接。这很奇怪，因为正如我所说，如果只是看一下，就会有.png文件可见。

我考虑了几种方法来解决这个问题，但都没有奏效：

1. 由于.png是实时生成的并包含在.apk中，我想也许我可以直接指向其中一个生成的文件，比如file:///android_res/drawable-hdpi-v4/my.png。(我检查了.apk文件，其中确实有一个..) 但是没有这样的运气。图片无法显示。

2. 好吧，我想——也许有一种方法可以让WebView直接显示矢量对象。也就是说，也许WebView会识别类似于<img src="file:///android_res/drawable/my_image.xml"/>的东西。我的意思是，Chrome可以呈现svg，对吧？也许它也支持.xml矢量格式。但是这里也不行。(即使它能够工作，它也不太可能支持旧版本的pre-chromium webview。)

3. 我尝试的第三件事是只在res/drawable中包含一个xxxhdpi大小的.png，以便webview可以找到它并希望显示它。不幸的是，这也不起作用。似乎只要在/drawable中有一个.xml矢量就足以阻止png，无论它是否在/drawable或/drawable-xxxhdpi目录中。

所以显而易见的问题是：有没有办法让WebView显示矢量xml（或生成的相关支持.png）？我们如何在WebView中访问HTML中的可绘制对象，包括矢量可绘制对象？尤其是不需要进行任何编程操作的情况下？ 有人知道这应该如何工作吗？我猜接下来要做的事情是深入研究chromium/android源代码，以尝试找出file:///android_res/drawable/的工作原理，但这听起来并不有趣，所以如果有人有答案，那将会很有帮助。我可能错过了一些非常明显的东西。提前感谢！更新：我尝试或排除的其他事情包括（1）删除图像名称中的下划线（因为我认为它们可能被替换为“/”），（2）在loadDataWithBaseUrl（）中使用各种基本URL的排列组合。

- fattire

---

WebView 明确不支持渲染 VectorDrawables，所以即使尝试也不值得。至于 android_res 访问，如果您从 file: URL 加载页面，请确保设置 setAllowFileAccessFromFileURLs（https://dev59.com/o2865IYBdhLWcg3wBJ0q）。如果您将页面作为数据 URL 加载，请参见 https://dev59.com/aWYq5IYBdhLWcg3wkRe- - Mikhail Naganov

只要我有一个向量.xml文件，这对我没有用。 setAllowFileAccessFromFileURLs仅适用于API 16及以上版本。但是，是的，没有运气让单个图像出现...也许其他人已经使其工作了？ - fattire

我刚刚进行了另一个实验——我使用了矢量XML图形（没有任何PNG文件）——并且得到了这个结果——它可以工作，并在Froyo模拟器中显示（生成的）PNG！我认为指向正确图像文件的机制没有考虑到WebView的情况，因此在Lollipop及更高版本上指向矢量图像，而WebView不支持。我认为这可能应该报告为一个错误。 - fattire

请查看此答案：https://dev59.com/ol8d5IYBdhLWcg3wsT0b#35738726 - Amit Vaghela

我觉得我漏掉了什么。即使使用新的supportlib，我也不明白webview如何与向量链接。app:srcCompat并不适用于<img src="file:///android_res/drawable/my_image.xml"/>这种情况。你知道有什么方法可以做到吗？ - fattire

Answer 1

四年后，我找到的最佳解决方案就是拥有两个向量文件 - (1) Android向量XML文件用于应用程序，以及(2) 相同的图像以.svg格式用于Webview。与提供每个dpi的单独.png或.gif相比，这仍然是一个更小的解决方案。

SVG和向量格式在内部非常相似，因此将一个转换为另一个并不困难。事实上，Android Studio将转换SVG-> XML。如果要反过来，只需比较一些示例即可。

所以只需将你的svg放在assets/svg/中，然后可以在HTML中使用从webview访问它们。

仍然会有存储压力。但是svgs相对很小（而且您可以缩小文件大小-即，删除Webview未使用的SVG文件中的一些额外内容），因此它不像提供APK中的大型二进制图像文件那样糟糕。

- fattire