How do I load an image from the Asset Catalog on cross-platform xamarin XAML?

Question

It seems like a really easy thing to do, and in theory it looks very straight forward:

1. create the Asset Catalog
2. add an Image Set and name it "imageName" (without .png)
3. add the images
4. done

or at least that's what i read pretty much everywhere, but I still can't get it to work.

My XAML 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"
             xmlns:local="clr-namespace:CrossBaiscs"
             x:Class="CrossBaiscs.MainPage">
    <ContentPage.Content>
        <StackLayout BackgroundColor="Orange">
            <Label Text="Welcome to Xamarin.Forms!"
                   TextColor="White"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />

            <Image VerticalOptions="CenterAndExpand"
                   HorizontalOptions="Center"
                   Source="logo1.png"/>

        </StackLayout>
    </ContentPage.Content>
</ContentPage>

And I added the images on the Asset Catalog:

I'm testing with Xamarin Live Player on an Iphone 6, and I can't see any image under the Label.

So... What am I missing?

EDIT

It works for this guy: Is it possible to use Image Set in a Xamarin Forms

But not for me, i did try removing the .png extension and leaving the xaml 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"
             xmlns:local="clr-namespace:CrossBaiscs"
             x:Class="CrossBaiscs.MainPage">
    <ContentPage.Content>
        <StackLayout BackgroundColor="Orange">
            <Label Text="Welcome to Xamarin.Forms!"
                   TextColor="White"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />

            <Image VerticalOptions="CenterAndExpand"
                   HorizontalOptions="Center"
                   Source="logo1"/>

        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Still doesn't work. Tried cleaning build folders and deleting bin/obj folders, still nothing.

Tried adding the resources to the Resources folder and deleting the Image Set from the Asset Catalog:

Still didn't work.

Ideas?

EDIT 2

I left those 3 images on Resources folder and added the extension .png on XAML and it worked, still would be nice to know how its supposed to be done using the Asset Catalog.

Answer 1

Just to point out something that's probably obvious but caused me issues for ages - you can't use the LaunchImages set that comes with the asset catalog as it is not eligible to list in the Image dropdown. You have to create a new Image Set.

After I did this, the following answers suddenly worked (where they hadn't before):

Including the Asset Catalog folder in the project

Creating a storyboard that comes with a code-behind

Answer 2

don't use the .png extension in the XAML

<Image VerticalOptions="CenterAndExpand"
               HorizontalOptions="Center"
               Source="logo1"/>

Answer 3

In Xamarin Documentation they have clearly mentioned that- On iOS, the Page.Icon property can't be populated from an image in an asset catalog image set. Instead, load icon images for the Page.Icon property from the Resources folder in the iOS project.

Answer 4

We were testing on Xamarin Live Player on an IPhone, turns out Asset Catalogs are not yet supported. (https://twitter.com/praeclarum/status/941775333753217025?s=08)

Thanks for the replies!