Xamarin.form using embedded images

Question

I want to use embedded images in my portable code. I am using a markup extension as many different videos and guides have shown. My project compiles and runs but no image is displayed. These guides say to put the images under "references" but I am unable to drag an image there or right click and add one in so they are in a folder called Images. If the problem is that they aren't under references then how do I get them there? Otherwise if anyone can spot the error that would be much appreciated.

https://www.c-sharpcorner.com/article/add-images-icons-and-splash-screen-in-xamarin-forms/

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=vswin

About.xaml.cs:

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace SVCAPB
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class About : ContentPage
    {
        public About()
        {
            InitializeComponent();
            Image embeddedImage = new Image { Source = ImageSource.FromResource("SVCAPB.Images.apbLeaders.jpg") };
        }
    }
}

About.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:local="clr-namespace:SVCAPB.MarkupExtensions"
             x:Class="SVCAPB.About"
             Title="About">
    <ContentPage.Content>
        <ScrollView>
            <StackLayout
            HorizontalOptions="Fill"
            VerticalOptions="Fill"
                BackgroundColor="#FFC107">
                <Image Source="{local:EmbeddedImage ResourceId=SVCAPB.Images.apbLeaders.jpg }"></Image>
            </StackLayout>
            </ScrollView>
    </ContentPage.Content>
</ContentPage>

EmbeddedImage.cs(under folder MarkupExtensions):

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace SVCAPB.MarkupExtensions
{
    public class EmbeddedImage : IMarkupExtension
    {
        public string ResourceId
        {
            get;
            set;
        }
        public object ProvideValue(IServiceProvider serviceProvider)
        {
            if (String.IsNullOrWhiteSpace(ResourceId)) return null;
            return ImageSource.FromResource(ResourceId);
        }
    }
}

Answer 1

Your code is correct, the problem is in the way of adding the images or the reference of your class

1.-Right click on your Images folder -> Add-> Add files-> select your image 2.- This step is necessary as it is marked in the documentation -if you are using Xamarin studio right click on the image -> Build Action -> EmbeddedResource -if you are using Visual studio right click -> properties -> Build Action -> EmbeddedResource

or

if you are using Xamarin studio you only need xmlns:local="clr-namespace:SVCAPB" if you are using Visual studio you need to specify the directory xmlns:local="clr-namespace:SVCAPB.MarkupExtensions"