Xamarin.Forms URI指定でImageが表示できなかった

Microsoft公式のImage のチュートリアルで詰まってしまった
Android端末で実機デバッグしてます

エラーメッセージ

[0:] ImageLoaderSourceHandler: Could not retrieve image or image data was invalid: Uri: http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_(Serengeti%2C_2009).jpg/200px-Papio_anubis_(Serengeti%2C_2009).jpg

やったこと

①HttpClient・SSL/TLS の設定変更

参考記事

ソリューションエクスプローラーの
「Androidプロジェクト」 ↓
「Properties(ダブルクリック)」 ↓
「Androidオプション」 ↓
「詳細設定」から以下を変更

• HttpClient 実装 -> マネージド
• SSL/TLS 実装 -> ネイティブ TLS 1.2+

うまくいかない…

②ライブラリ追加

参考記事
FFImageLoadingというプラグインを利用

NuGetパッケージ追加

ソリューションエクスプローラーの
「ソリューションのすべてのプロジェクト(右クリック)」 ↓
「ソリューションのNuGetパッケージの管理」 ↓
「参照」タブから以下を検索しインストール

• Xamarin.FFImageLoading
• Xamarin.FFImageLoading.Forms

SVGを利用するときは以下もインストール

• Xamarin.FFImageLoading.Svg
• Xamarin.FFImageLoading.Svg.Forms
• SkiaSharp

CircleTransformationのような変換を使用する場合はこちらもインストールするらしいです

• Xamarin.FFImageLoading.Transformations

初期化処理

• 「AppDelegate.cs」（iOSプロジェクト）
• 「MainActivity.cs」（Androidプロジェクト）

にFFImageLoadingの初期化処理を記述

AppDelegate.cs

namespace ImageTutorial.iOS
{
    [Register("AppDelegate")]
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();
            //追加
            FFImageLoading.Forms.Platform.CachedImageRenderer.Init();
            LoadApplication(new App());

            return base.FinishedLaunching(app, options);
        }
    }
}

MainActivity.cs

namespace ImageTutorial.Droid
{
    [Activity(Label = "ImageTutorial", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(savedInstanceState);
            Xamarin.Essentials.Platform.Init(this, savedInstanceState);
            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
            //追加
            FFImageLoading.Forms.Platform.CachedImageRenderer.Init(enableFastRenderer: true);
            LoadApplication(new App());
        }
        public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
        {
            Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);

            base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
        }
    }
}

XAMLに記述

imageタグをffimageloading:CachedImage に変更

MainPage.xaml

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
             x:Class="ImageTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <ffimageloading:CachedImage Source="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
               HeightRequest="300" />
    </StackLayout>
</ContentPage>

おサルさんでた