Having issues displaying images Xamarin Forms using only C#

Question

I ask this question with reference to this website https://developer.xamarin.com/guides/xamarin-forms/user-interface/images/#Local_Images

I tried the xaml code on the website and it works, however after I created a new xamarin PCL project and tested the c# code. It failed to display images.

What I did: Removed everything from the AboutPage.xaml till it looks like this:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="EmbbedImages.Views.AboutPage"
             xmlns:vm="clr-namespace:EmbbedImages.ViewModels;"
             Title="{Binding Title}">
  <ContentPage.BindingContext>
    <vm:AboutViewModel />
  </ContentPage.BindingContext>

</ContentPage>

And then for the AboutPage.xaml.cs, I modified it such that it looks like the following:

using Xamarin.Forms;

namespace EmbbedImages.Views
{
    public partial class AboutPage : ContentPage
    {
        public AboutPage()
        {
            InitializeComponent();

            var beachImage = new Image { Aspect = Aspect.AspectFit };
            beachImage.Source = ImageSource.FromFile("butterfly.jfif");

        }
    }
}

I have ensured that the butterfly.jfif image is added into my android drawable folder, however no images are being displayed. As I am new to xamarin and Android and c# any help would be greatly appreciated.

If you change the extension of your image to .jpg does that work? Looking at this resource it does not appear that .jfif image formats are supported. — Adam T
Is your .jfif file actually a jpeg encoded file? FYI: The file extension does not matter, you can change a jpeg extension to .fubar and Android will load and display it as the decoder uses the contents of the file, not the extension to determine what type of image it is, but it does have to be a supported format. — SushiHangover

woelliJ woelliJ · Accepted Answer · 2017-06-06T09:12:00

The image probably won't display, because it's not part of the Page. If you've added it to the Page and it still won't show it would have to be a problem in loading / opening the file / decoding it.

Either you add it in XAML or edit your code to the following:

using Xamarin.Forms;

namespace EmbbedImages.Views
{
    public partial class AboutPage : ContentPage
    {
        public AboutPage()
        {
            InitializeComponent();

            var beachImage = new Image { Aspect = Aspect.AspectFit };
            beachImage.Source = ImageSource.FromFile("butterfly.jfif");
            this.Content = beachImage;    
        }
    }
}

Adding it in XAML would look like that:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="EmbbedImages.Views.AboutPage"
             xmlns:vm="clr-namespace:EmbbedImages.ViewModels;"
             Title="{Binding Title}">
  <ContentPage.BindingContext>
    <vm:AboutViewModel />
  </ContentPage.BindingContext>

  <ContentPage.Content>
    <Image x:Name="beachImage" Aspect="AspectFit">
  </ContentPage.Content>

</ContentPage>

And the code behind:

using Xamarin.Forms;

namespace EmbbedImages.Views
{
    public partial class AboutPage : ContentPage
    {
        public AboutPage()
        {
            InitializeComponent();

            beachImage.Source = ImageSource.FromFile("butterfly.jfif");
        }
    }
}

Having issues displaying images Xamarin Forms using only C#

1 Answers