CODEWITHSUNDEEP
xamarin.forms
Lealan
Lealan

Reputation: 136

Xamarin Forms - Image source not working from url

I have updated my Visual Studio from 2017 (15.9.16) to 2019 (16.3.1). Then i opened old (2017) project in 2019 studio, run in Android emulator and have found that all images with url as source are not displayed. I tried different variants, but nothing help.

Then i created blank application for test:
App1 (.Net Standard 2.0) + App1.Android.

MainPage.xaml:

<StackLayout>
    <Label Text="Welcome to Xamarin.Forms!" 
       HorizontalOptions="Center"
       VerticalOptions="CenterAndExpand" />

    <Frame HeightRequest="200" BackgroundColor="#E7E7E7">
        <Image x:Name="myImage" Aspect="Fill" />
        <!--<Image Source="http://lealan.me/Content/images/typist/typist07.jpg" />-->
        <!--<Image>
            <Image.Source>
                <UriImageSource Uri="http://lealan.me/Content/images/typist/typist07.jpg" />
            </Image.Source>
        </Image>-->            
    </Frame>
</StackLayout>

MainPage.xaml.cs:

public MainPage()
{
    InitializeComponent();

    var url = "http://lealan.me/Content/images/typist/typist07.jpg";

    // variant 1 (not worked)
    //this.myImage.Source = ImageSource.FromUri(new Uri(url));

    // variant 2 (not worked)
    //this.myImage.Source = new UriImageSource() { Uri = new Uri(url) };

    // variant 3 (only this variant worked)
    var byteArray = new WebClient().DownloadData(url);
    this.myImage.Source = ImageSource.FromStream(() => new MemoryStream(byteArray));

    // + see others variants in MainPage.xaml
}

Also i tried different "Http Client implementation" in "Advanced Android Options", i even tried granted ALL permissions to android application, but nothing help.
(only variant 3 worked, but it heavy for MVVM binding)

Upvotes: 9

Views: 15327

Answers (6)

Nishit Jagetia
Nishit Jagetia

Reputation: 11

For Mac Users:

1. Right Click on .Android file in the main menu
2. Go to options
3. Go to Android Build
4. Change HTTP client Implementation to Managed
5. Change SSL/TLS Implementation to Native TLS 1.2+ and then run again.

Upvotes: 1

Alen.Toma
Alen.Toma

Reputation: 4870

I got this problem before and it have to do with the server not adding the right header.

The best solution i got is to create a Converter that download the image. as your variant 3.

Here is what i did.

    public class ImageSourceConverter : IValueConverter
    {
        static WebClient Client = new WebClient();
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
             if (value == null)
                 return null;

             var byteArray = Client.DownloadData(value.ToString());
             return ImageSource.FromStream(() => new MemoryStream(byteArray));
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }


// And the xaml

<Image Source="{Binding ImageUrl, Converter={StaticResource ImageSourceConverter}}" />

Upvotes: 16

ClanRedhead
ClanRedhead

Reputation: 61

I had the same issue and found the solution here: https://doumer.me/resolve-image-loading-error-in-xamarin-forms/

  1. Right click on your android project
  2. Select properties
  3. Go to Android options
  4. Click on the Advanced button
  5. Change the HTTPClient to Managed
  6. Change SSL/TLS implementation to Native TLS 1.2+
  7. Save changes and run your project. Images from Uri will load now

Upvotes: 6

Simbarashe Mupfururirwa
Simbarashe Mupfururirwa

Reputation: 375

I think the problem with VS 2019 was solved in an update. To make it work in your current project please follow this.

  1. Right click your Solution
  2. Click Manage Nuget Packages for Solution
  3. Click Updates Tab
  4. Select all the packages that are ready for update and update them
  5. Run your project again
  6. Give it about a minute. Your image(s) should load

Upvotes: 2

Dreamsforgotten
Dreamsforgotten

Reputation: 93

What is your output from visual studio. I ran into a similar issue loading images from passed uris. It turned out to be a header needed in the manifest. 

<application
    android:usesCleartextTraffic="true">
            ...
</application>```

Upvotes: 9

FreakyAli
FreakyAli

Reputation: 16562

I would suggest you use FFImageLoading's CachedImage for this.

It is a library that is vastly accepted by the community and is great with caching and has memory handling options as well.

You can check their Git wiki to understand the library in depth.

Download it form Nuget

Call CachedImageRenderer.Init() on each platform. Let’s put it on MainActivity.cs of our Android project and AppDelegate.cs of iOS.

Then add its namespace and use it like this:

  <ffimageloading:CachedImage
                HorizontalOptions="Center" VerticalOptions="Center"
                DownsampleToViewSize="true"
                Source = "{Binding ImageUrl}">
        </ffimageloading:CachedImage>

Upvotes: 0

Related Questions