Изображение не отображается (Xamarin Forms)

Question

Я показал данные на экране, кроме изображения, теперь я также хочу увидеть изображение, так как я могу видеть все данные, такие как имя и т. Д. c, ниже приведены коды: Какие изменения мне нужно внести и где?

Page 1 XAML C резкий код: (Изменения на этой странице?)

 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 резкий код: (Изменения на этой странице?)

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;

        }

Страница 2 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"
             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

Вам необходимо создать другое свойство изображения для ImageSource, как показано ниже:

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);
        }

    }

и привязать свойство Img к вашему XAML-коду, как показано ниже:

<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>

Добавьте следующий метод для получения источника изображения:

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

Теперь получите изображение в Img

Img = await getImageSource (obj.avatar);

Вывод:

Надеюсь, это поможет вам

Спасибо

Answer 2

Поскольку значение obj.avatar имеет тип string, а Source из ImageSource должно иметь тип ImageSource. Для этого используйте конвертер.

Код конвертера

Добавьте его в то же пространство имен, что и ваш класс данных.

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;
        }
    }
}

Установка ресурса c для вашего конвертера в ресурсе страницы

Страница данных 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>

Конвертер использование с привязкой

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