I'm currently experiencing a very inconvenient problem while developing a news app. In the app we use a WebView to display the contents of the articles. I'm not a big fan of webviews, but there is some small javascript for the image loading and the css makes it really easy to style.
The problem arises when the images are loaded with the javascript library called lazysizes.js. When the webview is opened everything shows well except the images. If instead of using the webview I start an Intent with the article url which uses the same exact html/css/js the images do show. If I try to load the article url directly into the webview the images won't show either. So I'm pretty sure it has to do with the webview and maybe it's settings.
I have tried the following webSettings.
WebSettings webSettings = webView.getSettings();
webSettings.setAppCacheEnabled(true);
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setUseWideViewPort(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setDisplayZoomControls(false);
webSettings.setSupportZoom(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);
webSettings.setLoadsImagesAutomatically(true);
webSettings.setDefaultTextEncodingName("utf-8");
webSettings.setBlockNetworkImage(false);
webSettings.setBlockNetworkLoads(false);
A small note should be that I was already getting a little bit desparate so I might have a few unnecessary things here.
If it helps this is the relavant image html.
<img alt="" src="data:image/gif;base64,R0lGODlhAwACAIAAAP///wAAACH5BAEAAAAALAAAAAADAAIAAAIChF8AOw=="
style="height:3840px; width:5760px" sizes="calc(100vh - 30px)"
data-src-full="http://someadress.com/media/cache/thumb_3x2_full/uploads/images/GIJS8206_flattened.jpg"
data-srcset="http://someadress.com/media/cache/thumb_3x2_tiny/uploads/images/GIJS8206_flattened.jpg 220w,
http://someadress.com/media/cache/resolve/thumb_3x2_small/uploads/images/GIJS8206_flattened.jpg 360w,
http://someadress.com/media/cache/resolve/thumb_3x2_medium/uploads/images/GIJS8206_flattened.jpg 555w,
http://someadress.com/media/cache/thumb_3x2_large/uploads/images/GIJS8206_flattened.jpg 720w,
http://someadress.com/media/cache/thumb_3x2_full/uploads/images/GIJS8206_flattened.jpg 1140w"
class="lazyload" />
I hope someone can help, because the fact that it does work in the native and chrome browsers makes me think it should be possible.