Issue with showing the Image - xaml

Question

My code is not working as I expected, data binding is working with other fields and properties but my image is not showing. Below the code, you can see the app output.
Here is the code for XAML:
<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>

Answer 1

You code looks well and you can directly binding a string to Source of image, I wrote a demo to test and you can check the code here:
In code behind:
public partial class MainPage : ContentPage
{
public MyModel obj { get; set; }
public MainPage()
{
obj = new MyModel();
obj.id = "idTest";
obj.first_name = "alex";
obj.last_name = "allen";
obj.email = "abc.com";
obj.avatar = "http://image10.bizrate-images.com/resize?sq=60&uid=2216744464";
InitializeComponent();
}
}
public class MyModel {
public string id { get; set; }
public string first_name { get; set; }
public string last_name { get; set; }
public string email { get; set; }
public string avatar { get; set; }
}
And in Xaml, the same as yours:
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="App150.MainPage"
x:Name="MyPage"
>
<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>
If your image url starts with http, you should add android:usesCleartextTraffic="true" to application tag in manifest file.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="com.companyname.app150">
<uses-sdk android:minSdkVersion="21" android:targetSdkVersion="28" />
<application android:label="App150.Android" android:usesCleartextTraffic="true"></application>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
</manifest>
And in iOS, you should Configure ATS Options.
I uploaded my sample project here, feel free to ask me if you have any question.