9

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)

Improve this question

6 Answers 6

Reset to default
16

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}}" />
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Thank you much for answer! But all this very strange. Why doesn't work standard variants?
as i said that the server is not adding some specific headers and thats why id its not working
The server where the image located? It is very strange for me - why standard variants (as recommended in ms documentation) work in VS 2017 but don't work in VS 2019? What needs to do with VS 2019?
So i am waiting another solution. If another solution doesn't exist then i will select your post as final solution.
@Lealan I've had problems like this and solved them in this way.You can try this.
|
9

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>```
Improve this answer

3 Comments

Oh, as it turned out, this perfectly works in my App1 test project, but still doesn't work in the old (2017) project. So i open this theme again (for several days), may be who know - what else reason of that?
@Lealan Newer versions of Android don't allow non-https traffic by default. When you upgraded VS, you probably also bumped your API target or something like that.
It doesn't seem as simple as http/https. I did work on Xamarin all day and I could not get my images to work. Changed source and it worked. All sources were https. Later I continue with other code and same simple code does not work, hence I get there. The answer above got me to check the android doc developer.android.com/guide/topics/manifest/… It is more about clear traffic. But I admit I'd link clear/non-clear traffic to http/https myself. So I don't understand really. How should we deal with that properly asof API 28?
6

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
Improve this answer

1 Comment

For Visual Studio on a Mac: Right click on Android project -> Options -> Android Build -> HTTPClient - Managed & SSL Implementation - Native TLS 1.2+
2

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
Improve this answer

Comments

1

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.
Improve this answer

Comments

0

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>
Improve this answer

1 Comment

Thank you for answer! In my 2017 xamarin project i exactly used FFImageLoading in one place (i didn't write about it, because basic variants should work in any case, in my opinion) but unfortunately in VS 2019 this also not works (just tried again in the App1 test project).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.