Creating an extension of WebView in Xamarin.Froms to display gifs. I cannot load the image on Android

问题

iOS works as expected. I have tried adding the .gif to the assets folder too (setting the BaseUrl to "file:///android_asset") with no luck. Any ideas?

imageHtml = "<center><body bgcolor =\""
                        + GetBackgroundColorHex()
                        + "\""
                        + heightAndWidth
                        + ">"
                        + (!string.IsNullOrWhiteSpace(imageFileName)
                            ? "<img src=\"" 
                            + imageFileName 
                            + "\""
                            + heightAndWidth
                            + "/>"
                            : "&nbsp;")
                        + "</body></center>";

            HtmlWebViewSource source = new HtmlWebViewSource()
            {
                Html = imageHtml
            };

            if (Device.RuntimePlatform == Device.Android && !string.IsNullOrWhiteSpace(imageFileName))
            {
                source.BaseUrl = "file:///android_res/drawable/";
            }

            Source = source;

Here's the error I get in output:

12-11 02:08:00.256 E/AndroidProtocolHandler(12895): Unable to open resource URL: file:///android_res/drawable/Loading.gif
12-11 02:08:00.256 E/AndroidProtocolHandler(12895): java.lang.NoSuchFieldException: Loading
12-11 02:08:00.256 E/AndroidProtocolHandler(12895):     at java.lang.Class.getField(Class.java:1549)
12-11 02:08:00.256 E/AndroidProtocolHandler(12895):     at org.chromium.android_webview.AndroidProtocolHandler.getFieldId(AndroidProtocolHandler.java:40)
12-11 02:08:00.256 E/AndroidProtocolHandler(12895):     at org.chromium.android_webview.AndroidProtocolHandler.openResource(AndroidProtocolHandler.java:54)
12-11 02:08:00.256 E/AndroidProtocolHandler(12895):     at org.chromium.android_webview.AndroidProtocolHandler.open(AndroidProtocolHandler.java:10)

回答1:

You can load Android.Webkit.WebView content via assets, not drawables.

Here is the Xamarin.Android code to parse the image to get its width/height to insure the aspect ratio is preserved and display it from the Asset folder:

WebView Gif Viewer:

var src = "out.gif";
var backgroundColor = "#ff0000";
int imageWidth;
int imageHeight;
using (var stream = Assets.Open(src))
using (var options = new BitmapFactory.Options { InJustDecodeBounds = true })
{
    await BitmapFactory.DecodeStreamAsync(stream, null, options);
    imageWidth = options.OutWidth;
    imageHeight = options.OutHeight;
}
var html = $"<body bgcolor={backgroundColor};\"><img src=\"{src}\" alt=\"A Gif file\" width=\"{imageWidth}\" height=\"{imageHeight}\" style=\"width: 100%; height: auto;\"/></body>";
webView.Settings.AllowFileAccessFromFileURLs = true;
webView.LoadDataWithBaseURL("file:///android_asset/", html, "text/html", "UTF-8", "");

Via Xamarin.Forms `WebView`:

var src = "image.gif";
var backgroundColor = "#ff0000";
int imageWidth = 300;
int imageHeight = 200;
var html = $"<body bgcolor={backgroundColor};\"><img src=\"{src}\" alt=\"A Gif file\" width=\"{imageWidth}\" height=\"{imageHeight}\" style=\"width: 100%; height: auto;\"/></body>";
webView.Source = new HtmlWebViewSource
{
    Html = html
};

Note: image.gif is in the Android Assets (AndroidResource) folder and iOS Resource folder (BundleResource)

回答2:

Save your GIF file at Assets folder. Here "loading.gif" is the filename.

WebView webView=new WebView
{
      Source = new HtmlWebViewSource
      {
          Html = $"<body\"><img src=\"loading.gif\"/></body>"
      }
};
Content = webView;

来源：https://stackoverflow.com/questions/47748780/creating-an-extension-of-webview-in-xamarin-froms-to-display-gifs-i-cannot-load

标签

android