从 Xamarin.Forms 中 JSON 文件中的 URL 加载照片

Question

I'm trying to load photo from link which is in JSON file. I am deserializing the JSON from the link and I bind the link to an Image Source like this:

<Image HorizontalOptions="Center" Source="" x:Name="foto" 
    WidthRequest="200" HeightRequest="200"/>

This is my code behind:

foto.Source = Zdjecie;

Zdjecie is the value in JSON file which looks like this:

[
  {
    "Nazwa": "Czekolada mleczna Sport & Fitness",
    "Opis": "Przykładowy opis produktu Czekolada mleczna Sport & Fitness",
    "Zdjecie": "https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg",
    "WW": 0.28,
    "WBT": 0.22,
    "Energia": 31.8125,
    "Tluszcz": 2.19375,
    "Weglowodany": 3.225,
    "Blonnik": 0.11875,
    "Bialko": 0.45625,
    "Zelazo": 0.1875,
    "Wapn": 15.5
  },
  {
    "Nazwa": "Czekolada mleczna Sport & Fitness2",
    "Opis": "Przykładowy opis produktu Czekolada mleczna Sport & Fitness2",
    "Zdjecie": "https://kif.pl/www/wp-content/uploads/2015/05/chocolate_PNG27-620x413.png",
    "WW": 0.16,
    "WBT": 0.21,
    "Energia": 28.5625,
    "Tluszcz": 2.19375,
    "Weglowodany": 2.94375,
    "Blonnik": 0.4875,
    "Bialko": 0.34375,
    "Zelazo": 0.8125,
    "Wapn": 0
  }
]

I think everything is fine but none of the photos are loading I also tried using:

foto.Source = new UriImageSource()
{
    img = new Uri(Zdjecie);
}

but this doesn't work either.

Answer 1

You should add a breakpoint in the line foto.Source = Zdjecie; to see if you have get the correct value of Zdjecie . I wrote a simple demo and it works on my sided, you can check below codes:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        string jsonStr = "[{'Nazwa': 'Czekolada mleczna Sport & Fitness','Opis': 'Przykładowy opis produktu Czekolada mleczna Sport & Fitness', 'Zdjecie': 'https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg'}]";

        var ObjContactList = JsonConvert.DeserializeObject<List<RootObject>>(jsonStr);

        RootObject obj = ObjContactList[0];

        foto.Source = obj.Zdjecie;
    }
}

public class RootObject
{
    public string Nazwa { get; set; }
    public string Opis { get; set; }
    public string Zdjecie { get; set; }
}

And in Xaml:

<StackLayout>
    <!-- Place new controls here -->
    <Button Clicked="Button_Clicked" Text="Click to load the Image" 
       HorizontalOptions="Center"
        />

    <Image HorizontalOptions="Center" Source="" x:Name="foto" 
WidthRequest="200" HeightRequest="200"/>
</StackLayout>