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)

That's interesting. I have just tried downloading the image and placing it only in the drawable folder and it showed just fine. If you are developing for iOS, do you see it there, or is it missing too? Also, did you try deleting the bin & obj folders? — Mihail Duchev
I deleted the bin and obj folders and now I get error as shown in my latest edit to the post. — JNickVA1
After delete all bin and obj folders in all projects, return to Visual Studio > Clean Solution then restart Visual Studio. If not works, check if your Visual Studio has an update. — Renan Barbosa

Renan Barbosa Renan Barbosa · Accepted Answer · 2020-06-05T09:57:15

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>

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

3 Answers