图像未显示（Xamarin 表单）

Question

I have shown the data on screen except image now i also want to see image as i can see all the data like id name etc, below are the codes: What changes do i need to make and where?

Page 1 XAML C sharp code: (Changes on this page?)

 public partial class MainPage : ContentPage
    {
        private static readonly HttpClient client = new HttpClient();
        public UserResponse result;
        public String test;
        public MyUser user;
        public MainPage()
        {
            InitializeComponent();
            //     Task.Run(async () => await GetinfoAsync());  
            _ = GetinfoAsync();
        }
        public async Task GetinfoAsync()
        {
            var responseString = await client.GetStringAsync("https://reqres.in/api/users/2");

            result = JsonConvert.DeserializeObject<UserResponse>(responseString); 

            if (result != null)
            {
                Device.BeginInvokeOnMainThread(() =>
                {
                    test = dis.Text = "Id:- " + result.Data.id + "\nEmail:- " + result.Data.email + "\nFirst Name:- " + result.Data.first_name + "\nLast Name:- " + result.Data.last_name + "\nImage:- " + result.Data.avatar; dis.Text = test;
                });
            }
        }

        private async void click_me(Object sender, EventArgs args)
        {
            await this.Navigation.PushAsync(new Data(result));
        }

Page 2 XAML C sharp Code: (Changes on this page?)

public partial class Data : ContentPage
    {

        private MyUser _obj;
        public MyUser obj
        {
            get { return _obj; }
            set
            {
                _obj = value;
                OnPropertyChanged();
            }
        }

        public String show;

        public Data(UserResponse result)
        {
            //show = test;
            InitializeComponent();
            obj = result.Data;
            // displaylabel.Text = test;

        }

Page 2 XAML code for design:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="demo.Data" x:Name="MyPage" >
    <ContentPage.Content >

        <StackLayout Padding="20">
            <Label Text="Id" TextColor="Red" />
            <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.id}"   IsReadOnly="True" />
            <Label Text="First Name" TextColor="Red"/>
            <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.first_name}" IsReadOnly="True"/>
            <Label Text="Last Name" TextColor="Red"/>
            <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.last_name}" IsReadOnly="True"/>
            <Label Text="Email" TextColor="Red"/>
            <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.email}" IsReadOnly="True"/>
            <Editor BindingContext="{x:Reference Name=MyPage}" Text="Image" IsReadOnly="True"/>
            <Image BindingContext="{x:Reference Name=MyPage}" Source="{Binding obj.avatar}"/>



        </StackLayout>

    </ContentPage.Content>

</ContentPage>

Answer 1

Since the value of obj.avatar is of type string and Source of ImageSource has to be of type ImageSource . Use converter for this.

Converter code

Add it in the same namespace as your Data class.

namespace demo
{
    public class ImageUriConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value != null)
            {
                return ImageSource.FromUri(new Uri(value.ToString()));
            }

            return null;
        }

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

Set a static resource for your converter in page resource

Data Page Xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:local="clr-namespace:demo"
    x:Class="demo.Data" x:Name="MyPage" >
    <ContentPage.Resources>
        <local:ImageUriConverter x:Key="imageConverter"></local:TestConverter>
    </ContentPage.Resources>

Converter usage with binding

<Image HeightRequest="300" Source="{Binding obj.avatar, Converter={StaticResource imageConverter}}"/>

Answer 2

You need to create another image property for ImageSource like below :

private ImageSource img;
    public ImageSource Img
    {
        get { return img; }
        set
        {
            img = value;
            OnPropertyChanged();
        }
    }

private UserDTO Obj;
    public UserDTO obj
    {
        get { return Obj; }
        set
        {
            Obj = value;
            OnPropertyChanged();
        }
    }

Now

 public Data(UserResponse result)
    {
        //show = test;
        InitializeComponent();
        obj = result.Data;
        if (!string.IsNullOrEmpty(obj.avatar))
        {
            Img = await getImageSource(obj.avatar);
        }

    }

and bind Img property to your XAML code like below :

<StackLayout Padding="20, 60">
        <Label Text="Id" TextColor="Red" />
        <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.id}"   IsReadOnly="True" />
        <Label Text="First Name" TextColor="Red"/>
        <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.first_name}" IsReadOnly="True"/>
        <Label Text="Last Name" TextColor="Red"/>
        <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.last_name}" IsReadOnly="True"/>
        <Label Text="Email" TextColor="Red"/>
        <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.email}" IsReadOnly="True"/>
        <Editor BindingContext="{x:Reference Name=MyPage}" Text="Image" IsReadOnly="True"/>
        <Image BindingContext="{x:Reference Name=MyPage}" Source="{Binding Img}" HeightRequest="100" WidthRequest="100"/>



    </StackLayout>

Add below method to get image source:

public async Task<ImageSource> getImageSource(string url)
    {
        byte[] byteArray = Client.DownloadData(url);
        return ImageSource.FromStream(() => new MemoryStream(byteArray));
    }

Now get image in Img

Img = await getImageSource(obj.avatar);

Output :

Hope it will help you

Thanks