In AvaloniaUI, how to display an image from a web URL?

Question

I'm developing an Avalonia App using ReactiveUI and MVVM. I want to display an image from a web URL, what would be the best course of action to achieve this ? I have setup the following Binding :

                this.OneWayBind(
                    ViewModel,
                    vm => vm.UserProfileImageUrl,
                    v => v.ProfileImage.Source,
                    ImageConverter
                ).DisposeWith(disposables);

And Binding adapter :

        private IImage ImageConverter(string arg)
        {
        
        }

But I don't know how to implement the Binding adapter to download the image without blocking the UI. Is there some tool like Glide on Android ?

Thank you in advance,

I think it's a bad design choice to download the image in your binding converter. I'd rather store it in the viewmodel for example using a byte array or even better an Avalonia.Bitmap. Then you can download the image asynchronously and update the property and the UI when ready. — frankenapps, May 17 '21 at 07:51
Yes I ended up doing that ! I you want to issue an anwser I'll accept it — Ombrelin, May 20 '21 at 13:13

score 6 · Answer 1 · answered May 22 '21 at 09:34

You can download and store the Image in your ViewModel asynchronously, or using the download complete event for example like this:

public class MainWindowViewModel : ViewModelBase
    {
        private string chessboardUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Chess_Board.svg/2000px-Chess_Board.svg.png";
        public string ChessboardUrl
        {
            get => chessboardUrl;
            set {
                this.RaiseAndSetIfChanged(ref chessboardUrl, value);
                DownloadImage(ChessboardUrl);
                System.Diagnostics.Debug.WriteLine(ChessboardUrl);
            }
        }

        private Avalonia.Media.Imaging.Bitmap chessboard = null;
        public Avalonia.Media.Imaging.Bitmap Chessboard
        {
            get => chessboard;
            set => this.RaiseAndSetIfChanged(ref chessboard, value);
        }

        public MainWindowViewModel()
        {
            DownloadImage(ChessboardUrl);
        }

        public void DownloadImage(string url)
        {
            using (WebClient client = new WebClient())
            {
                client.DownloadDataAsync(new Uri(url));
                client.DownloadDataCompleted += DownloadComplete;
            }
        }

        private void DownloadComplete(object sender, DownloadDataCompletedEventArgs e)
        {
            try
            {
                byte[] bytes = e.Result;

                Stream stream = new MemoryStream(bytes);

                var image = new Avalonia.Media.Imaging.Bitmap(stream);
                Chessboard = image;
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.WriteLine(ex);
                Chessboard = null; // Could not download...
            }
            
        }
    }

Then you can easily bind to the Url and the associated image. For example like this from the XAML (with appropriate DataContext):

<StackPanel>
    <Image Source="{Binding Chessboard}"
           Width="200"
           Height="200"
           Name="MyImage"></Image>
    <TextBox Text="{Binding ChessboardUrl}"></TextBox>
    
</StackPanel>

Is there a way to do this using Task based async instead of event based? — Gradyn Wursten, Aug 14 '22 at 16:00

score 3 · Accepted Answer · answered Mar 24 '23 at 08:13

I'd recommend AsyncImageLoader.Avalonia, It can handle Async based downloads without much overhead and with added features including Disk and Memory based caching of the results and "ready" properties which will allow you to display loading spinners for downloading images.

You can find a basic example of using it here, but for brevity to show you the power. I'll paste the line of the resultant axaml for once everything is setup:

<Image asyncImageLoader:ImageLoader.Source="https://github.com/AvaloniaUtils/AsyncImageLoader.Avalonia/raw/master/AsyncImageLoader.Avalonia.Demo/Assets/cat2.jpg" />

The added benefits being that you don't need any special handling in your View or View Model. You can bind Source to a property that figures out the URL and do everything with just strings such as concatenation etc.

In AvaloniaUI, how to display an image from a web URL?

2 Answers2