ImageCell does not load image from URI - Android

[Spacedu]

Description

ImageCell not load image from URI on Android.

Steps to Reproduce

1. Use this example: https://docs.microsoft.com/pt-br/dotnet/api/xamarin.forms.imagecell?view=xamarin-forms. (Replace URL Image, because image no longer exists on the server, suggestion url to facilitate test: https://i0.wp.com/www.thedudes.com.br/wp-content/uploads/2018/06/Vitrine-Perfil-dos-Dudes-04.png).
   Obs.: I tested with other code, none worked.
2. Remove Device.OnPlatform(), just leave Image.FromUri.
3. Test on Android.
4. Image place in white, not load.

Expected Behavior

Image showing.

Actual Behavior

Image not showing.
Exceptions: Image Loading: Error getting stream for {url image}....
Exceptions: ImageLoaderSourceHandler: Could not retrieve image or image data was invalid. {In ListView ImageCell with Binding}

Basic Information

• Version with issue:
• Last known good version: XF - 3.4
• IDE: Visual Studio 2017
• Platform Target Frameworks: SDK 28 - Run on Device API 26 - Emulators same result.
  • iOS: Not tested
  • Android: API 26 - Zenfone 4
  • UWP: Windows 10 - Build 17134.556
• Android Support Library Version: No
• Nuget Packages: 4.9.2.5706
• Affected Devices: Zenfone 4, Genymotion emulator, nexus_5x(Default emulator VS2017)

Reproduction

class ImageCellDemoPage : ContentPage
		{			
			public ImageCellDemoPage()
			{
				Label header = new Label
				{
					Text = "ImageCell",
					FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
					HorizontalOptions = LayoutOptions.Center
				};

				TableView tableView = new TableView
				{
					Intent = TableIntent.Form,
					Root = new TableRoot
				{
					new TableSection
					{
						new ImageCell
						{
                            // Some differences with loading images in initial release.
                            ImageSource = ImageSource.FromUri(new Uri("https://i0.wp.com/www.thedudes.com.br/wp-content/uploads/2018/06/Vitrine-Perfil-dos-Dudes-04.png")),
							Text = "This is an ImageCell",
							Detail = "This is some detail text",
						}
					}
				}
				};

				// Accomodate iPhone status bar.
				this.Padding = new Thickness(10, 20, 10, 5);

				// Build the page.
				this.Content = new StackLayout
				{
					Children =
				{
					header,
					tableView
				}
				};
			}
		}

[samhouts]

@PureWeen Are you looking at this one?

[ianthetechie]

This seems to be a perennial issue. See a very straightforward sample below. The binding is to a Uri. In a typical table view with 50 items, it's quite common for several images to never display. Sometimes scrolling away and coming back will "fix" it. Using RetainElement has slightly better results (as expected), but if something is "stuck" it rarely every loads. But performance of the app is absolutely terrible on most Android devices, so this is practically unusable. Using RecycleElement and its variant has more errors, but they usually fix themselves when scrolling offscreen and coming back. This is NOT a problem on Xamarin.Forms.3.3.0.967583. The problem exists on every version I've tried after (including the current latest Xamarin.Forms.3.6.0.293080)...

See also #4584

    <ListView ItemsSource="{Binding Sermons}"
              RefreshCommand="{Binding RefreshCommand}"
              IsRefreshing="{Binding LoadingInProgress, Mode=OneWay}"
              IsPullToRefreshEnabled="true"
              ItemSelected="Handle_ItemSelected">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ImageCell Text="{Binding FullTitle}"
                           Detail="{Binding Speaker.DisplayName}"
                           ImageSource="{Binding Speaker.RoundedThumbnailImageUrl}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

[samhouts]

@ianthetechie Can you please open a new issue and attach a small reproduction project? Thanks!

[PureWeen]

@ianthetechie a lot of this was rewritten for 4.0 as well so if you could test with 4.0 pre9 as well please.

[richardvaldiviesomacias]

This still happening in Visual Studio for Mac Community Edition. Here is my small example:

    <ListView.ItemTemplate>
       <DataTemplate>
            <ImageCell Text="{Binding Name}" 
                   Detail="{Binding Status}" 
                   ImageSource="{Binding ImageUrl}"/>         
       </DataTemplate>    
    </ListView.ItemTemplate>      
  </ListView>

And

 listView.ItemsSource = new List<Contact> {
                new Contact {Name="Name 1", ImageUrl="http://lorempixel.com/100/100/people/1" },
                new Contact {Name="Name 2", ImageUrl="http://lorempixel.com/100/100/people/2" , Status="Hey Let's talk"},
               };

[richardvaldiviesomacias]

This code is kind of similar but it works.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage 
    Padding="0, 20, 0, 0"
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="Helloworld.ListPage2">
  <ListView x:Name="listView">
    <ListView.ItemTemplate>
       <DataTemplate>
           <ViewCell>
                <StackLayout Orientation="Horizontal">
                     <Image Source="{Binding ImageUrl}"/>   
                     <StackLayout>
                        <Label Text="{Binding Name}"/>
                        <Label Text="{Binding Status}" TextColor="Gray"/>    
                     </StackLayout>   
                     <Button Text="Follow" />
                </StackLayout>
                    
           </ViewCell>        
       </DataTemplate>    
    </ListView.ItemTemplate>      
  </ListView>
</ContentPage>

namespace Helloworld
{
    public partial class ListPage2 : ContentPage
    {
        public ListPage2()
        {
            InitializeComponent();
            listView.ItemsSource = new List<Contact> {
                new Contact {Name="Name 1", ImageUrl="http://lorempixel.com/100/100/people/1" },
                new Contact {Name="Name 2", ImageUrl="http://lorempixel.com/100/100/people/2" , Status="Hey Let's talk"},
               };
        }
    }
}

[ianthetechie]

@samhouts @PureWeen it was not fixed in 4.0 or the early 4.1 releases, but it is finally working properly in the latest 4.1 releases.

[MaxxDelusional]

I have this issue in 4.2
I can't even get images to load in a normal Image control.

<Image x:Name="img" />

And in Page.OnAppearing

img.Source = ImageSource.FromUri(new Uri("https://via.placeholder.com/200"));

I get the following error in my Output window

(17343): --- SkImageDecoder::Factory returned null
[0:] ImageLoaderSourceHandler: Could not retrieve image or image data was invalid: Uri: https://via.placeholder.com/200
 

My Android HttpClient is set to Managed, and SSL/TLS is set to Native TLS 1.2+

[samhouts]

We're investigating that on #7248. @MaxxDelusional We don't monitor old closed issues, so you should create new issues as you encounter problems. Thanks!

[PraveenPotla]

Image are not loading from url in xamarin forms please help me

[PureWeen]

@PraveenPotla can you create a new issue with a repro please?

[hgfdjwkuhx]

Description

ImageCell not load image from URI on Android.

Steps to Reproduce

1. Use this example: https://docs.microsoft.com/pt-br/dotnet/api/xamarin.forms.imagecell?view=xamarin-forms. (Replace URL Image, because image no longer exists on the server, suggestion url to facilitate test: https://i0.wp.com/www.thedudes.com.br/wp-content/uploads/2018/06/Vitrine-Perfil-dos-Dudes-04.png).
   Obs.: I tested with other code, none worked.
2. Remove Device.OnPlatform(), just leave Image.FromUri.
3. Test on Android.
4. Image place in white, not load.

Expected Behavior

Image showing.

Actual Behavior

Image not showing.
Exceptions: Image Loading: Error getting stream for {url image}....
Exceptions: ImageLoaderSourceHandler: Could not retrieve image or image data was invalid. {In ListView ImageCell with Binding}

Basic Information

• Version with issue:

• Last known good version: XF - 3.4

• IDE: Visual Studio 2017

• Platform Target Frameworks: SDK 28 - Run on Device API 26 - Emulators same result.

  • iOS: Not tested
  • Android: API 26 - Zenfone 4
  • UWP: Windows 10 - Build 17134.556

• Android Support Library Version: No

• Nuget Packages: 4.9.2.5706

• Affected Devices: Zenfone 4, Genymotion emulator, nexus_5x(Default emulator VS2017)

Reproduction

class ImageCellDemoPage : ContentPage
		{			
			public ImageCellDemoPage()
			{
				Label header = new Label
				{
					Text = "ImageCell",
					FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
					HorizontalOptions = LayoutOptions.Center
				};

				TableView tableView = new TableView
				{
					Intent = TableIntent.Form,
					Root = new TableRoot
				{
					new TableSection
					{
						new ImageCell
						{
                            // Some differences with loading images in initial release.
                            ImageSource = ImageSource.FromUri(new Uri("https://i0.wp.com/www.thedudes.com.br/wp-content/uploads/2018/06/Vitrine-Perfil-dos-Dudes-04.png")),
							Text = "This is an ImageCell",
							Detail = "This is some detail text",
						}
					}
				}
				};

				// Accomodate iPhone status bar.
				this.Padding = new Thickness(10, 20, 10, 5);

				// Build the page.
				this.Content = new StackLayout
				{
					Children =
				{
					header,
					tableView
				}
				};
			}
		}

Check the emulator wifi is working !!
I spent 12 hours on a problem like this, and I didn't relate that