Image path saved in Database, how to retrieve using Binding in Xamarin

Question

I am utilizing the MVVM design and I am trying to pull an "image" from my database using binding. The "photo" is saved in the database as "photo.png".

I created a local folder that both the iPhone & Android app can pull from using local Resource.

When I am hard coding the image the line of code is

<Image Source="{local:ImageResource GSUACM.ProfileImages.gsu_logo.png}" VerticalOptions="Center" HeightRequest="64" />

But when trying to use binding to pull from database I assumed I had to return the binding as a string.

My binding in my XAML file is <Image Source="{Binding someImage}"

The user is instantiated as soon as they log in to the application. The initial query pulls name, password, image, etc and stores them as a Global variable.

In the view model I created the get/set for "someImage"

public ImageSource someImage { get; set; }

Before setting the binding, I concatenated the "image" with the "path" The path being:

String pathName = "local:ImageResource GSUACM.ProfileImage."

And furthermore, I set someImage to the global variable

this.someImage = pathName + GlobalVars.User.ProfileImage;

After printing out someImage in the console, the correct path is listed but it's listed as a URI.

Uri: local:ImageResource GSUACM.ProfileImage.rat.png

and the program furthermore states:

ImageLoaderSourceHandler: Image data was invalid: Xamarin.Forms.StreamImageSource

Am I wrong in thinking I can combine the strings and it will work as a path?

Answer 1

Through your code and description, I assume your image is Embedded images and it is be placed in the shared project. To make it working with binding, you need to use a Binding Value Converters :

Here is an example I use:

public class EmbeddedToImageSourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is string fileName && parameter is String assemblyName)
        {
            try
            {
                var imageSource = ImageSource.FromResource(assemblyName + "." + fileName, typeof(EmbeddedToImageSourceConverter).GetTypeInfo().Assembly);
                return imageSource;
            }
            catch (Exception)
            {
                return value;
            }
        }
        else
            return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value;
    }
}

And in xaml, you can set binding like this:

<ContentPage.Resources>
    <local:EmbeddedToImageSourceConverter x:Key="converter"/>
</ContentPage.Resources>

<StackLayout>
    <!-- Place new controls here -->
    <Image Source="{Binding imageName, Converter={StaticResource converter}, ConverterParameter='App220'}"
       HorizontalOptions="Center"
       VerticalOptions="CenterAndExpand" />
</StackLayout>

Note: ConverterParameter here should be the root path of your image. For example, here I set App220 because I put it directly in the shared project. If I put the image under an folder which called tempImageFolder , then ConverterParameter should be App220.tempImageFolder .

I uploaded a sample project here and you can check. Feel free to ask me any question.

Refer: How to Bind Local Embedded Image in ListView in Xamarin Forms?