Android: How to load a vector drawable image into a webview?

不想你离开。 提交于 2019-12-24 00:08:15

问题


Sorry if this is a repeat but I searched diligently and didn't find this question asked yet...

So back in ye olden days of Android, you could just add something like this to a WebView's source html:

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

And it would display my.png correctly in the WebView. But-- Android now supports (and prefers we use) these new-fangled vector drawables, and Android Studio's Vector Asset Studio makes it really easy to import them from SVG files or whatever.

The great thing is that for backwards compatibility, .pngs are automatically generated during the build for various dpi/screen sizes to support older devices. So if you're targeting an older device, there are .png images there.

If only I could reach them. Because, as far as I can tell, using vector graphics does break those file:///android_res/drawable/ img links in WebViews. Which is weird, because as I say there are .png files to see, if it only looked.

I've thought about a few methods to fix this, but none have worked:

  1. Since .pngs are generated on-the-fly and are included in the .apk, I thought maybe I could point directly to one of the generated files with something like file:///android_res/drawable-hdpi-v4/my.png. (I checked the .apk file and that's where one of them was..) But no such luck there. Broken image.

  2. Okay, I thought-- maybe there's a way to get the WebView to display the vector objects directly. That is, maybe the WebView would recognize an <img src="file:///android_res/drawable/my_image.xml"/> or something similar. I mean, Chrome can render svg right? Maybe it supports the .xml vector format too. But no dice here either. (Even if it had worked, it would be unlikely to support older pre-chromium webview versions.)

  3. The third thing I tried is to include just one xxxhdpi-sized .png in res/drawable so that the webview would find it and hopefully display it. Unfortunately, this doesn't work either. It appears that just having an .xml vector in /drawable is enough to have it block the png, no matter if it's in the /drawable or /drawable-xxxhdpi directories.

So the obvious question: Is there a way to get the WebView to either display the vector xml (or the associated support .png that was generated)? How do we access drawables from HTML in a WebView w/Vector drawables? Esp. without having to do anything programmatically?

Anyone know how this is supposed to work? I guess the next thing to do is delve into the chromium/android source to try to find out how file:///android_res/drawable/ works, but that doesn't sound fun, so if anyone has an answer, that would be helpful.

I'm probably missing something really obvious here. Thx in advance!

Update: Other things I tried/ruled out include (1) removing underscores in image names (as I thought they might be replaced with "/"), (2) various permutations of baseurl in loadDataWithBaseUrl()


回答1:


Well, four years later and the best solution I've come up with is just to have two vector files-- (1) the xml Android vector file for the app, and then (2) the identical image in the .svg format for the webview. This is still a smaller solution compared with providing a seperate .png or .gif for every dpi, etc.

SVG and the vector format are internally very similar, so it's not difficult to convert one to the other. In fact, Android Studio will convert SVG->XML. If you want to go the other way, just compare a few examples.

So just put your svgs in assets/svg/, and then you can access from a webview using <img src='file:///android_asset/svg/mysvg.svg'/> in your HTML.

There's still a storage hit. But svgs are relatively tiny (and you can minify-- ie, scoop out some of the extra fluff in the SVG file that isn't used by the webview) so it's not as bad as the alternative-- providing large binary image files in the apk.



来源:https://stackoverflow.com/questions/33537751/android-how-to-load-a-vector-drawable-image-into-a-webview

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!