I've seen this question a couple of times before but with no answers.
I have a Android app with a WebView. I load a HTML from a web service. Inside this HTML there are text, links and images.
Text and links are working but despite almost all images are well displayed there are some of them that show a blue quare instead of the image.
I've put a trace in my code:
Log.d("", "_htmlfrombackend="+_htmlfrombackend);
webView.loadDataWithBaseURL("", _htmlfrombackend, "text/html", "UTF-8", "");
And this is the output:
_htmlfrombackend=<p>text text text... <img width="200" height="300" alt="" src="http://www.mysamplesite.com/mysampleimage.jpeg" style="width: 200px; height: 300px;" />...text text</p>
That image is shown as a blue square. This is a screenshot:
So now I tried this:
String _newHtml = "<img width=\"200\" height=\"300\" alt=\"\" src=\"http://www.mysamplesite.com/mysampleimage.jpeg\" style=\"width: 200px; height: 300px;\" />"+_htmlfrombackend;
webView.loadDataWithBaseURL("", _newHtml, "text/html", "UTF-8", "");
And my webview shows this:
The first image is displayed well, the second one displays a blue square yet but they have the same img tag!
I've tried wrapping the html code between html and body tags but the results are the same.
This happens in Android 4.0, 4.4 and 5.0.
Anyone could have any idea of why my hardcoded image is shown correctly but the one from the backend is not?
Kind regards!
Edited to be more clear.
Edit: I've added images.
New EDIT: I've keep searching for a solution. I've had a deep reading of the HTML I receive and it's correctly formed, not malformed tags, just one strange thing, each img tag is inside a h2 tag, I mean:
<h2><img .../></h2>
But I tried to add these tags in my example with no difference:
String _newHtml = "<h2><img width=\"200\" height=\"300\" alt=\"\" src=\"http://www.mysamplesite.com/mysampleimage.jpeg\" style=\"width: 200px; height: 300px;\" /></h2>"+_htmlfrombackend;
webView.loadDataWithBaseURL("", _newHtml, "text/html", "UTF-8", "");
My image is still displayed while the image received don't.
New EDIT: I'm still looking for a solution, but I have a new clue. I've tried to show a wrong image:
String _newHtml = "<img width=\"200\" height=\"300\" alt=\"\" src=\"http://asdafsqwe\" style=\"width: 200px; height: 300px;\" />"+_htmlfrombackend;
webView.loadDataWithBaseURL("", _newHtml, "text/html", "UTF-8", "");
And my screen shows this:
As you can see, there is a square with a broken-image icon inside. This makes me think that the blue squares don't mean that there is a problem getting the image, there should be any other kind of problem.
In the HTML code img tag try src=new File( url ).toURI() for local files.
Related
So I am trying to display a gif that I am pulling from reddit in a webview in my app. From the reddit api I retrieve a JSON of a posts data, and from media_embed/content I get the html of an iFrame from Gyfcat that looks like this:
<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgfycat.com%2Fifr%2Fhalffeistyharlequinbug&display_name=Gfycat&url=https%3A%2F%2Fgfycat.com%2Fhalffeistyharlequinbug&image=https%3A%2F%2Fthumbs.gfycat.com%2FHalfFeistyHarlequinbug-size_restricted.gif&key=2aa3c4d5f3de4f5b9120b660ad850dc9&type=text%2Fhtml&schema=gfycat" width="600" height="600" scrolling="no" title="Gfycat embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe>
To this I URLDecode it like so:
val gifData = json["media_embed"]["content"]
val decoded = URLDecoder.decode(gifData, "UTF-8")
And I display it like so:
feedItemWebView.settings.javaScriptEnabled = true
feedItemWebView.loadData(decoded, "text/html", "UTF-8")
This gives me something that looks like this:
Instead of using URLDecoder I also tried doing this:
val decoded = gifData.replace("<", "<")
.replace(">", ">")
.replace("&", "&")
And putting this in the WebView in the same way as above results in the webview loading, but just displaying a still image (and not the gif as expected) like this:
Is there something I am missing that I need to do in order for it to actually play the gif?
If I try putting the same thing into an html file like this:
<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgfycat.com%2Fifr%2Fhalffeistyharlequinbug&display_name=Gfycat&url=https%3A%2F%2Fgfycat.com%2Fhalffeistyharlequinbug&image=https%3A%2F%2Fthumbs.gfycat.com%2FHalfFeistyHarlequinbug-size_restricted.gif&key=2aa3c4d5f3de4f5b9120b660ad850dc9&type=text%2Fhtml&schema=gfycat" width="600" height="600" scrolling="no" title="Gfycat embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe>
my browser will load it correctly, so it must be something wrong with the WebView or my WebView settings
The issue was coming from a wrong configuration of the WebView. In fact, reading the logcat, this information came out from the webview:
I/chromium: [INFO:CONSOLE(26)] "Error reading storage", source: https://gfycat.com/assets/app.bfa24b4d87267ff469b0.js (26)
The iframe is loading an external script which use html5_webstorage also called localStorage. It is disabled by default in the webview (Security reason), so trying to access it was throwing an error which was preventing the video to play.
Therefore we need to turn it on like follow:
String data = "<iframe class=\"embedly-embed\" src=\"https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgfycat.com%2Fifr%2Fhalffeistyharlequinbug&display_name=Gfycat&url=https%3A%2F%2Fgfycat.com%2Fhalffeistyharlequinbug&image=https%3A%2F%2Fthumbs.gfycat.com%2FHalfFeistyHarlequinbug-size_restricted.gif&key=2aa3c4d5f3de4f5b9120b660ad850dc9&type=text%2Fhtml&schema=gfycat\" width=\"600\" height=\"600\" scrolling=\"no\" title=\"Gfycat embed\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen=\"true\"></iframe>\n";
webview = findViewById(R.id.webview);
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setDomStorageEnabled(true);
webview.getSettings().setDatabaseEnabled(true);
webview.loadData(data, "text/html", null);
I tested it on a really simple project considering you already got the iFrame html.
I am trying to show some basic html elements in a webview. I can do it with load datawithbaseurl method. But is there any way to check if content loaded correctly ?
Here is my html code coming from webservice.
<div style="float:left;margin:0;padding:0;top:0;bottom:0"><img src="http://exam.exam.com/upload/images/Activities/poskbhov.jpg" alt="" /></div>
and my webview code :
webView.loadDataWithBaseURL("", content.Content, "text/html", "UTF-8", "");
I just want to show an image. But i want to make sure its loaded. Right now i dont have an image. WebView just shows an img object in a div right now. I would like to put this image can not shown alert.
To link an image, build an String (HTML format) and code an IMG element:
String htmlContent = "<HTML>.....<img id=\"main_image\" src=yourImage.png alt=\"\"></br>.....</HTML>");
Load the content telling the webView were your resources are, and put your IMG in your "assets" folder with the name "yourImage.png"
webView.loadDataWithBaseURL("file:///android_asset/", htmlContent, "text/html", "utf-8", null);
You can also Link css file from here too!
If you want to see a full example, take a look to this project:
https://github.com/matessoftwaresolutions/AndroidHttpRestService
It consists on an HTTPService and, in the class HttpServiceFragment you can see a full (specific) implementation.
I hope it helps!!!
I am having a little problem with the WebView in android.
When I load the following text in the WebView I am getting a strange character for e.g. the 's, and also some later on. The HTML is, printed to the Logger:
This week’s show is hosted by Fr. Gabriel Gillen, O.P. and Fr. Walter Wagner, O.P . The readings are: Acts 2:14A, 36-41; 1 Peter 2:20B-25; John 10:1-10. Click here to listen!<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=opeast.org&blog=23933483&post=18874&subd=dominicandaily&ref=&feed=1" width="1" height="1" />
The code to log and load the HTML is:
Log.d(iDomsAndroidApp.TAG, "HTML: " + article.getDescription());
webView.loadData(html, "text/html", "utf-8");
The resulting screenshot is:
Can anybody give me a hint how to fix this problem?
Try out by,
webView.loadData(myHtmlString, "text/html; charset=UTF-8", null);
I manage to show and play a video using HTML in WebView by loading the following HTML:
String html = "<!DOCTYPE html>\n"+
"<html><head><title></title><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"><script type=\"text/javascript\"></script></head>\n" +
"<body style=\"margin: 0; padding: 0;\"><div id=\"video\"><video id=\"vid\" height=\"180\" width=\"320\" poster controls><source src=\"http://d21dkag2w1645r.cloudfront.net/article_videos/fcce6da21f4a88ffff297a7af9769b4e50f070f8.mp4\" type=\"video/mp4\"></video></div></body></html>";
However, I cant get the video's poster image to load. I would expect this to be auto-loaded by the webview by getting the first frame of the video, but this does not seem to happen and my webview jsut shows a blank background with the controls. How can I get the webview to auto-load the poster image/first frame of the video and show it as a placeholder?
I have a Webview in which i load HTML data (and also using css) using the following code:
final String mime = "text/html";
final String encoding = "utf-8";
final String htmlData = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />"
+ aboutDescriptions[index];
wv.loadDataWithBaseURL("file:///android_asset/", htmlData, mime,
encoding, null);
in the HTML i load images like this:
<img src=\"file:///android_res/drawable/myimage.jpg\"/>
in my css i have the following defined for the "img" tag:
img {
max-width: 100%;
max-height: 100%;
}
On my (real) 2.3.3 Android Phone and my Google Nexus 7 Tablet everything is working as expected (the HTML renders fine using the css and the images are displayed).
However on a real Galaxy Nexus phone and on many emulated devices the images are not shown at all. What am i doing wrong? I have experienced quit a few bugs allready with WebView, hopefully this is one that can be fixed? (perhaps a CSS tweak?)
managed to fix this by changing my css like this:
img {
width: 100%;
height: auto;
}