Issue with showing the Image

问题

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>

回答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.

来源：https://stackoverflow.com/questions/60409947/issue-with-showing-the-image