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


Microsoft公式の[Image のチュートリアル](https://docs.microsoft.com/ja-jp/xamarin/get-started/tutorials/image/?tabs=vswin)で詰まってしまった
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 の設定変更
[参考記事](https://doumer.me/resolve-image-loading-error-in-xamarin-forms/)

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

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

<img width="200" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309688/f91e1d45-a8f5-65b5-ea4a-8c42bee48a3c.png">

<img width="500" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309688/126d3a7f-62ea-5753-445c-d4dc557ba92b.png">

<img width="400" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309688/c7f2ff19-c89c-56f0-5341-8c51b96ef3ae.png">


うまくいかない…:dizzy_face:

### ②ライブラリ追加
[参考記事](https://stackoverflow.com/questions/58299753/xamarin-forms-imageloadersourcehandler-could-not-retrieve-image-or-image-data?answertab=active#tab-top)
`FFImageLoading`というプラグインを利用
#### NuGetパッケージ追加
ソリューションエクスプローラーの
「ソリューションのすべてのプロジェクト(右クリック)」 ↓
「ソリューションのNuGetパッケージの管理」 ↓
「参照」タブから以下を検索しインストール

- `Xamarin.FFImageLoading`
- `Xamarin.FFImageLoading.Forms`

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

- `Xamarin.FFImageLoading.Svg`
- `Xamarin.FFImageLoading.Svg.Forms`
- `SkiaSharp`

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

- `Xamarin.FFImageLoading.Transformations`


<img width="200" alt="4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309688/330ebb2d-3f61-253b-b44d-f78114108fd3.png">
<img width="200" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309688/9f5e1336-7df9-669e-447d-b18ea1a73d58.png">
<img width="500" alt="6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309688/a702c31f-0493-68b7-6c37-ee3de3ccc074.png">

#### 初期化処理

- 「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>
```

おサルさんでた:blush:
<img width="200" alt="7.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309688/5394ece8-6b2f-5eb5-b158-ecae00ea39cb.jpeg">