Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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+

1.png

2.png

3.png

うまくいかない…:dizzy_face:

②ライブラリ追加

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

NuGetパッケージ追加

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

  • Xamarin.FFImageLoading
  • Xamarin.FFImageLoading.Forms

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

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

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

  • Xamarin.FFImageLoading.Transformations

4.png
5.png
6.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:
7.jpeg

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away