Image won't display in <Image> in Xamarin Forms

Question

I am trying to load a png image into an Image control in Xamarin Forms. I have added the image to both the drawable and the drawable-hdpi folder, set the BuildAction = AndroidResource and the Custom Tool = MSBuild:UpdateGeneratedFiles. One of the png images I try to use, monkeyface.png, copied from a sample project, loads just fine. The other png image will not display at all. Here are the relevant details:

CODE

            <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <Image  Source="monkeyface.png" Aspect="AspectFill" HorizontalOptions="CenterAndExpand" VerticalOptions="Start"/>
                <Image  Source="homepage.png" Aspect="AspectFill" HorizontalOptions="Fill" VerticalOptions="End"/>
                <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="Center">
                    <Button Text="Click" TextColor="Black" HorizontalOptions="FillAndExpand"/>
                </StackLayout>
            </Grid>

OUTPUT

IMAGE INFO FOR IMAGE 1

IMAGE INFO FOR IMAGE 2

I am going crazy trying to figure this out. Any help would be greatly appreciated!

UPDATE I also tried, with no success, the following code:

<?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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="NGIC_XAML.Views.Login.Login">
    <ContentPage.Content>
        <StackLayout>
            <Image  Source="homepage.png" Aspect="AspectFit"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

But this works:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="NGIC_XAML.Views.Login.Login">
    <ContentPage.Content>
        <StackLayout>
            <Image  Source="monkeyface.png" Aspect="AspectFit"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

UPDATE 2

    <AndroidResource Include="Resources\drawable\homepage.png">
      <Generator>MSBuild:UpdateGeneratedFiles</Generator>
    </AndroidResource>
  <ItemGroup>
    <AndroidResource Include="Resources\drawable-hdpi\homepage.png">
      <Generator>MSBuild:UpdateGeneratedFiles</Generator>
    </AndroidResource>
  </ItemGroup>

And in case someone points out that the image that won't load has the Generator specified, I removed that also and it STILL doesn't load.

  <ItemGroup>
    <AndroidResource Include="Resources\drawable\monkeyface.png" />
  </ItemGroup>
  <ItemGroup>
    <AndroidResource Include="Resources\drawable-hdpi\monkeyface.png" />
  </ItemGroup>

the png file in question

The location of the images in the Android Resources folder

After removing bin and obj folders and rebuilding, I get the following errors:

System.NullReferenceException: Object reference not set to an instance of an object. at Xamarin.AndroidDesigner.DesignerProject.set_PreferredTheme(Theme value) in E:\A_work\711\s\Xamarin.Designer.Android\Xamarin.AndroidDesigner\DesignerProject.cs:line 901 at Xamarin.AndroidDesigner.AndroidDesignerSession.SetTheme(Theme theme, Boolean triggerChange) in E:\A_work\711\s\Xamarin.Designer.Android\Xamarin.AndroidDesigner\AndroidDesignerSession.cs:line 376 at Xamarin.Designer.Forms.Preview.AndroidXamlRenderer.GetRenderSessionForFormFactor(XamlRenderContext context, XamlFormFactor formFactor) in E:\A_work\711\s\Xamarin.Designer.Forms\Xamarin.Designer.Forms.Preview\Android\AndroidXamlRenderer.cs:line 236 at Xamarin.Designer.Forms.Preview.AndroidXamlRenderer.d__25.MoveNext() in E:\A_work\711\s\Xamarin.Designer.Forms\Xamarin.Designer.Forms.Preview\Android\AndroidXamlRenderer.cs:line 136 --- End of stack trace from previous location where exception was thrown --- at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at System.Runtime.CompilerServices.TaskAwaiter.ValidateEnd(Task task) at Xamarin.Designer.Forms.Preview.AndroidXamlRenderer.d__27.MoveNext() in E:\A_work\711\s\Xamarin.Designer.Forms\Xamarin.Designer.Forms.Preview\Android\AndroidXamlRenderer.cs:line 307 --- End of stack trace from previous location where exception was thrown --- at Microsoft.VisualStudio.Telemetry.WindowsErrorReporting.WatsonReport.GetClrWatsonExceptionInfo(Exception exceptionObject)

Answer 1

Seeming as this issue comes up for quite a few searches on google for 'missing image issues on iOS Xamarin', another possible solution when you've exhausted all potential layout issues is to clean the solution and rebuild.

In Visual Studio, Right click the project and click Clean.

Answer 2

So, after 2 days of frustration in trying to get the png file to display in an Image, and after following all of the great suggestions posted in response to my question, I decided to perform the Visual Studio update from the version I was using, Version 16.6.0, to Version 16.6.1. After the update finished, I loaded the solution again and LO AND BEHOLD! the image displays perfectly. I still have no definitive reason why it was failing to load before I did the update, but WHO CARES! It loads now and that's all that matters.

Thanks to everyone who tried to help!

Answer 3

You need to set Grid number of rows and columns, then specify in each child which row and column it should be on. As this example has only one column, it does not need to be specified as good code practice in XAML.

<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

    <Grid.RowDefinitions>
        <RowDefinition Height="49*" />
        <RowDefinition Height="49*" />
        <RowDefinition Height="2*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Image Source="monkeyface.png" Aspect="AspectFill" HorizontalOptions="CenterAndExpand" />
    <Image Grid.Row="1" Source="homepage.png" Aspect="AspectFill" HorizontalOptions="Fill" />
    <Button Grid.Row="2" Text="Click" TextColor="Black" HorizontalOptions="FillAndExpand"/>

</Grid>

Answer 4

The issue is not with your image, but with your incorrect use of a layout for what you are trying to achieve. If you want the items to be one below the other, then the best layout will be a StackLayout.

Currently, you are using a Grid layout and you have added all of its items without even specifying the row definitions. This way you are just trying to "align" them by their HorizontalOptions & VerticalOptions, which is not the best approach, since the grid is trying to guess what you want your end result to look like.

If you still want to use a Grid for your layout, then I strongly suggest you read thoroughly grid's Rows & columns guide.