Photo loading from URL in JSON file in Xamarin.Forms

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.

@Jason i tried using https but still it doesn't show anything — user9604562, Jan 31 '20 at 15:24
Are you sure that returned JSON is valid and has the structure you're showing us? More: did you set your `Image` binding context to the json object after loading it? If no, how can the image control know what `Zdjecie` contains? Please also consider that json object doesn't inherit `INotifyPropertyChange` interface, so if you change `Zdjecie` property at runtime, image won't be updated automatically! — Marco, Jan 31 '20 at 23:30
is your your ViewModel property is Uri too or UriImageSource ? check this https://stackoverflow.com/questions/40579372/bind-image-to-url-xamarin-forms-xaml — Anand, Feb 01 '20 at 03:51
When i set viewModel property to Uri (from string) ```public Uri Zdjecie { get; set; }``` it shows me this error when i click on item in list to open details ```System.ObjectDisposedException: 'Can not access a closed Stream.'``` code which i use now is: ```var imageSource = new UriImageSource { Uri = new Uri(Zdjecie.ToString()) }; imageSource.CachingEnabled = false; imageSource.CacheValidity = TimeSpan.FromHours(1); foto.Source = imageSource;``` — user9604562, Feb 01 '20 at 10:02
@Marco so as you said I should load images at app startup? Every list item has different image, and when you choose that item its binding those values to ItemDetailPage (with picture) then it should load from the web. — user9604562, Feb 01 '20 at 10:19

score 0 · Accepted Answer · answered Feb 03 '20 at 08:58

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>

Photo loading from URL in JSON file in Xamarin.Forms

1 Answers1