Ffimageloading: [Xamarin.Forms Android] Error loading SVG Image through Data Binding

[gregdegruy]

It appears that data binding is possible for SVGs. I'm taking a different approach loading SVGs through data binding.

I have them all in a file structure like the below

   > Images
       > image-name.svg

Then I have the Images bound in my XAML

<ffimageloadingsvg:SvgCachedImage 
 WidthRequest="50" 
 HeightRequest="50" 
 Source="{Binding ImageSource}"/>

And a ViewModel containing the path data for the SVGs. I've tried several approaches as you can see (commented most out for testing purposes) and they all fail 😢 .

MenuItems = new ObservableCollection<MenuItem>(new[]
            {                   
                    new MenuItem { Id = 1,
                        Title = "Facility Info",
                        CommandParameters = "",
                        ImageSource = Xamarin.Forms.ImageSource.FromResource("resource://myMTC.Assets.Images.user.svg") },
                    //new MenuItem { Id = 2,
                    //    Title = "Workshops",
                    //    CommandParameters = "",
                    //    ImageSource = SVG_ASSET_PATH + "user.svg" },
                    //new MenuItem { Id = 3,
                    //    Title = "Feedback",
                    //    CommandParameters = "",
                    //    ImageSource = Xamarin.Forms.ImageSource.FromResource("myMTC.Assets.Images.user.svg") },
                    //new MenuItem { Id = 4,
                    //    Title = "Artifacts",
                    //    CommandParameters = "",
                    //    ImageSource = Xamarin.Forms.ImageSource.FromFile("ms-appx:///Assets/Images/user.svg") },
                    //new MenuItem { Id = 4,
                    //    Title = "Action Items",
                    //    CommandParameters = "",
                    //    ImageSource = new Uri(SVG_ASSET_PATH + "Droid.saction-items.svg") },
            });

It appears the error is rooted somewhere in the ImagerLoaderTask API

ffimageloading\source\FFImageLoading.Common\Work\ImageLoaderTask.cs:463

--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw () [0x0000c] in <401c12b575cb4781b0a9e010ed5a0221>:0 
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess (System.Threading.Tasks.Task task) [0x0003e] in <401c12b575cb4781b0a9e010ed5a0221>:0 
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification (System.Threading.Tasks.Task task) [0x00028] in <401c12b575cb4781b0a9e010ed5a0221>:0 
at System.Runtime.CompilerServices.TaskAwaiter.ValidateEnd (System.Threading.Tasks.Task task) [0x00008] in <401c12b575cb4781b0a9e010ed5a0221>:0 
08-23 14:41:49.328 I/mono-stdout( 5366):   at System.Runtime.CompilerServices.TaskAwaiter.ValidateEnd (System.Threading.Tasks.Task task) [0x00008] in <401c12b575cb4781b0a9e010ed5a0221>:0 
08-23 14:41:49.328 I/mono-stdout( 5366):   at System.Runtime.CompilerServices.ConfiguredTaskAwaitable`1+ConfiguredTaskAwaiter[TResult].GetResult () [0x00000] in <401c12b575cb4781b0a9e010ed5a0221>:0 
08-23 14:41:49.328 I/mono-stdout( 5366):   at FFImageLoading.Work.ImageLoaderTask`2+<RunAsync>d__109[TImageContainer,TImageView].MoveNext () [0x00435] in C:\projects\ffimageloading\source\FFImageLoading.Common\Work\ImageLoaderTask.cs:463 

Running
Release > 2.2.10-pre-428.

VS2017 Enterprise (using preview sometimes too)

on

Windows 10 Enterprise
v1703
OS Build 15063.540
64 bit

[daniel-luberda]

• Why do you use Assets folder instead Resources folder?
• You can also use this: https://github.com/luberda-molinet/FFImageLoading/wiki/SVG-support#data-urls-support OR this: https://github.com/luberda-molinet/FFImageLoading/wiki/Data-URL-&-Embedded-Resources-support-(including-base64)

[gregdegruy]

I have a folder named Assets inside my PCL. should I instead call it Resources?

[daniel-luberda]

If you use assets located in PCL you can use following image sources:

• "resource://myMTC.Assets.Images.user.svg" (string)
• new EmbeddedResourceImageSource("myMTC.Assets.Images.user.svg")
• ImageSource.FromResource("myMTC.Assets.Images.user.svg") (least efficient one)

If it's located in a different assembly than your app, then you must also specify correct assembly:

• "resource://myMTC.Assets.Images.user.svg?assembly=[FULL ASSEMBLY NAME]" (string)
• new EmbeddedResourceImageSource("myMTC.Assets.Images.user.svg", assembly)
• ImageSource.FromResource("myMTC.Assets.Images.user.svg", assembly) (least efficient one)

That's all.

[gregdegruy]

I will give this a try, thanks!

When using "resource://myMTC.Assets.Images.user.svg", I encountered the below. Have you seen an error like this before?

It appears the error is rooted somewhere in the ImagerLoaderTask API

ffimageloading\source\FFImageLoading.Common\Work\ImageLoaderTask.cs:463

--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw () [0x0000c] in <401c12b575cb4781b0a9e010ed5a0221>:0 
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess (System.Threading.Tasks.Task task) [0x0003e] in <401c12b575cb4781b0a9e010ed5a0221>:0 
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification (System.Threading.Tasks.Task task) [0x00028] in <401c12b575cb4781b0a9e010ed5a0221>:0 
at System.Runtime.CompilerServices.TaskAwaiter.ValidateEnd (System.Threading.Tasks.Task task) [0x00008] in <401c12b575cb4781b0a9e010ed5a0221>:0 
08-23 14:41:49.328 I/mono-stdout( 5366):   at System.Runtime.CompilerServices.TaskAwaiter.ValidateEnd (System.Threading.Tasks.Task task) [0x00008] in <401c12b575cb4781b0a9e010ed5a0221>:0 
08-23 14:41:49.328 I/mono-stdout( 5366):   at System.Runtime.CompilerServices.ConfiguredTaskAwaitable`1+ConfiguredTaskAwaiter[TResult].GetResult () [0x00000] in <401c12b575cb4781b0a9e010ed5a0221>:0 
08-23 14:41:49.328 I/mono-stdout( 5366):   at FFImageLoading.Work.ImageLoaderTask`2+<RunAsync>d__109[TImageContainer,TImageView].MoveNext () [0x00435] in C:\projects\ffimageloading\source\FFImageLoading.Common\Work\ImageLoaderTask.cs:463 

Running
Release > 2.2.10-pre-428.

[daniel-luberda]

2.2.10-pre-428 There were some bugs in that update, I advice you to use the newest prerelease.

[gregdegruy]

i see. updating now and will report back.

[gregdegruy]

on the latest and still facing the issue :/ PM> Install-Package Xamarin.FFImageLoading.Svg.Forms -Version 2.2.10-pre-466

[daniel-luberda]

Latest version is 466

[gregdegruy]

<ffimageloadingsvg:SvgCachedImage 
                                WidthRequest="25" 
                                HeightRequest="25" 
                                Source="{Binding ImageSource}"

ImageSource must be of type Xamarin.Forms.ImageSource right? I think I'm still confused lol 😅

And has to be loaded like this in the binding class ImageSource = Xamarin.Forms.ImageSource.FromResource("resource://myMTC.Assets.Images.user.svg") }, or else there will be a type mismatch?

[daniel-luberda]

There are built in converters, just pass a string resource://myMTC.Assets.Images.user.svg. EmbeddedResourceImageSource is also Xamarin.Forms.ImageSource

[gregdegruy]

I'm still missing something, still facing a bug 🤕 with this new code

have in my binding class with menu items

new MenuItem { Id = 1,
                        Title = "Facility Info",
                        CommandParameters = "",
                        ImageSourceString = "resource://myMTC.Assets.Images.user.svg" },

and have in my XAML
Source="{Binding ImageSourceString}"/>

Am I fight in using <ffimageloadingsvg:SvgCachedImage in my XAML or should use another element?

[daniel-luberda]

Can you post full error stack trace? Is the file in the same assembly as you app's assembly?

[gregdegruy]

I believe this is the relevant stack trace and yes, how can I verify that it is in the same as my app's assembly?

08-30 13:56:52.614 I/mono-stdout( 3916): --- End of stack trace from previous location where exception was thrown ---
08-30 13:56:52.614 I/mono-stdout( 3916):   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw () [0x0000c] in <896ad1d315ca4ba7b117efb8dacaedcf>:0 
08-30 13:56:52.614 I/mono-stdout( 3916):   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess (System.Threading.Tasks.Task task) [0x0003e] in <896ad1d315ca4ba7b117efb8dacaedcf>:0 
08-30 13:56:52.614 I/mono-stdout( 3916):   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification (System.Threading.Tasks.Task task) [0x00028] in <896ad1d315ca4ba7b117efb8dacaedcf>:0 
08-30 13:56:52.614 I/mono-stdout( 3916):   at System.Runtime.CompilerServices.TaskAwaiter.ValidateEnd (System.Threading.Tasks.Task task) [0x00008] in <896ad1d315ca4ba7b117efb8dacaedcf>:0 
08-30 13:56:52.614 I/mono-stdout( 3916):   at System.Runtime.CompilerServices.ConfiguredTaskAwaitable`1+ConfiguredTaskAwaiter[TResult].GetResult () [0x00000] in <896ad1d315ca4ba7b117efb8dacaedcf>:0 
08-30 13:56:52.614 I/mono-stdout( 3916):   at FFImageLoading.Retry+<DoAsync>d__0`1[T].MoveNext () [0x00047] in C:\projects\ffimageloading\source\FFImageLoading.Common\Helpers\Retry.cs:18 <---
08-30 13:56:52.614 I/mono-stdout( 3916): 
08-30 13:56:52.614 I/mono-stdout( 3916): ---> (Inner Exception #3) System.ArgumentException: Only http or https scheme is allowed
08-30 13:56:52.614 I/mono-stdout( 3916):   at System.Net.Http.HttpRequestMessage.set_RequestUri (System.Uri value) [0x00019] in <b0c3744e6161489795d9238096c98104>:0 
08-30 13:56:52.614 I/mono-stdout( 3916):   at System.Net.Http.HttpRequestMessage..ctor (System.Net.Http.HttpMethod method, System.Uri requestUri) [0x0000d] in <b0c3744e6161489795d9238096c98104>:0 
08-30 13:56:52.614 I/mono-stdout( 3916):   at System.Net.Http.HttpRequestMessage..ctor (System.Net.Http.HttpMethod method, System.String requestUri) [0x00011] in <b0c3744e6161489795d9238096c98104>:0 
08-30 13:56:52.614 I/mono-stdout( 3916):   at System.Net.Http.HttpClient.GetAsync (System.String requestUri, System.Net.Http.HttpCompletionOption completionOption, System.Threading.CancellationToken cancellationToken) [0x00006] in <b0c3744e6161489795d9238096c98104>:0 
08-30 13:56:52.614 I/mono-stdout( 3916):   at FFImageLoading.Cache.DownloadCache+<DownloadAsync>d__13.MoveNext () [0x000a9] in C:\projects\ffimageloading\source\FFImageLoading.Common\Cache\DownloadCache.cs:97 
08-30 13:56:52.614 I/mono-stdout( 3916): --- End of stack trace from previous location where exception was thrown ---
08-30 13:56:52.614 I/mono-stdout( 3916):   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw () [0x0000c] in <896ad1d315ca4ba7b117efb8dacaedcf>:0 
08-30 13:56:52.615 I/mono-stdout( 3916):   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess (System.Threading.Tasks.Task task) [0x0003e] in <896ad1d315ca4ba7b117efb8dacaedcf>:0 
08-30 13:56:52.615 I/mono-stdout( 3916):   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification (System.Threading.Tasks.Task task) [0x00028] in <896ad1d315ca4ba7b117efb8dacaedcf>:0 
08-30 13:56:52.615 I/mono-stdout( 3916):   at System.Runtime.CompilerServices.TaskAwaiter.ValidateEnd (System.Threading.Tasks.Task task) [0x00008] in <896ad1d315ca4ba7b117efb8dacaedcf>:0 
08-30 13:56:52.615 I/mono-stdout( 3916):   at System.Runtime.CompilerServices.ConfiguredTaskAwaitable`1+ConfiguredTaskAwaiter[TResult].GetResult () [0x00000] in <896ad1d315ca4ba7b117efb8dacaedcf>:0 
08-30 13:56:52.615 I/mono-stdout( 3916):   at FFImageLoading.Cache.DownloadCache+<>c__DisplayClass12_0+<<DownloadAndCacheIfNeededAsync>b__0>d.MoveNext () [0x0006e] in C:\projects\ffimageloading\source\FFImageLoading.Common\Cache\DownloadCache.cs:56 
08-30 13:56:52.615 I/mono-stdout( 3916): --- End of stack trace from previous location where exception was thrown ---
08-30 13:56:52.615 I/mono-stdout( 3916):   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw () [0x0000c] in <896ad1d315ca4ba7b117efb8dacaedcf>:0 
08-30 13:56:52.615 I/mono-stdout( 3916):   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess (System.Threading.Tasks.Task task) [0x0003e] in <896ad1d315ca4ba7b117efb8dacaedcf>:0 
08-30 13:56:52.615 I/mono-stdout( 3916):   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification (System.Threading.Tasks.Task task) [0x00028] in <896ad1d315ca4ba7b117efb8dacaedcf>:0 
08-30 13:56:52.615 I/mono-stdout( 3916):   at System.Runtime.CompilerServices.TaskAwaiter.ValidateEnd (System.Threading.Tasks.Task task) [0x00008] in <896ad1d315ca4ba7b117efb8dacaedcf>:0 
08-30 13:56:52.615 I/mono-stdout( 3916):   at System.Runtime.CompilerServices.ConfiguredTaskAwaitable`1+ConfiguredTaskAwaiter[TResult].GetResult () [0x00000] in <896ad1d315ca4ba7b117efb8dacaedcf>:0 
08-30 13:56:52.615 I/mono-stdout( 3916):   at FFImageLoading.Retry+<DoAsync>d__0`1[T].MoveNext () [0x00047] in C:\projects\ffimageloading\source\FFImageLoading.Common\Helpers\Retry.cs:18 <---
08-30 13:56:52.615 I/mono-stdout( 3916): 
08-30 13:56:52.635 D/Mono    ( 3916): [0xc50ed920] worker parking
08-30 13:56:52.635 D/Mono    ( 3916): [0xc51ee920] worker unparking, timeout? no interrupted? no
08-30 13:56:52.635 D/Mono    ( 3916): [0xc51ee920] worker parking

[gregdegruy]

here's the header for my XAML with assembly info

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
             xmlns:ffimageloadingsvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="myMTC.Views.HamburgerMenu"
             Title="Master">

and the namespace, class, and usings for my binding class

using System;
using System.Reflection;
using System.Collections.ObjectModel;
using System.ComponentModel;

using Prism.Commands;
using Prism.Navigation;

using myMTC.Models;

using FFImageLoading.Work;

namespace myMTC.ViewModels
{
    class HamburgerMenuViewModel : ViewModelBase, INotifyPropertyChanged
    {

[daniel-luberda]

Only http or https scheme is allowed it suggests that you're using old package version. Please delete all bin/obj folders and be sure that you updated package in EVERY solution.

[gregdegruy]

I only have the latest version is 466 installed in my Solution, PCL and .Droid projects. Should it also be in the unused UWP and iOS? Clearing the bin & obj now.

[gregdegruy]

Got it working! didn't include the SvgImageSourceConverter

added the ResourceDictionary

<ContentPage.Resources>
        <ResourceDictionary>
            <ffimageloadingsvg:SvgImageSourceConverter x:Key="SvgImageSourceConverter"></ffimageloadingsvg:SvgImageSourceConverter>
        </ResourceDictionary>
    </ContentPage.Resources>

and SvgImageSourceConverter
Source="{Binding ImageSourceString, Converter={StaticResource SvgImageSourceConverter}}"/>

Will also add, love this tool. Should be a part of the product itself.