Embed image not showing in Xamarin.Forms - visual-studio

Question

I have two images in 'Images' folder. Trying to load these images in page but image not showing on page. It does not produce any error in debug. I am checking in Xamarin live player android device.
ImageResourceExtension.cs
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using Xamarin.Forms.Internals;
namespace Buffting
{
// You exclude the 'Extension' suffix when using in Xaml markup
[Preserve(AllMembers = true)]
[ContentProperty(nameof(Source))]
public class ImageResourceExtension : IMarkupExtension
{
public string Source { get; set; }
public object ProvideValue(IServiceProvider serviceProvider)
{
if (Source == null)
return null;
// Do your translation lookup here, using whatever method you require
var imageSource = ImageSource.FromResource(Source);
return imageSource;
}
}
}
BeautySalon.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:Buffting;assembly=Buffting"
x:Class="Buffting.Home.BeautySalon"
Title="Beauty Salon">
<ContentPage.Content>
<ListView x:Name="SalonList" RowHeight="370">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Margin="5,5,5,-5" OutlineColor="Blue" HasShadow="true">
<Grid>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.ColumnSpan="2" HeightRequest="200" Source="{ Binding SalonImage}" VerticalOptions="Fill" Aspect="AspectFill" />
</Grid>
<Grid Grid.Row="1" Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="1" Grid.Column="0" Margin="0, 40, 0, 0" Text="{ Binding SalonName }" FontSize="Large" TextColor="White" />
<Image Grid.Row="1" Grid.Column="1" x:Name="Star" Source="{local:ImageResource Buffting.Images.star_outline.png}" />
</Grid>
<Grid Grid.Row="2" Padding="0, 0, 10, 0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="Location:" FontAttributes="Bold" FontSize="Small" TextColor="Black" />
<Label Grid.Row="0" Grid.Column="1" Text="{ Binding Location}" />
<Label Grid.Row="1" Grid.Column="0" Text="Full Address:" FontAttributes="Bold" FontSize="Small" TextColor="Black" />
<Label Grid.Row="1" Grid.Column="1" Text="{ Binding Address}" />
<Label Grid.Row="2" Grid.Column="0" Text="Phone:" FontAttributes="Bold" FontSize="Small" TextColor="Black" />
<Label Grid.Row="2" Grid.Column="1" Text="{ Binding Phone}" />
<Label Grid.Row="3" Grid.Column="0" Text="Opening Time:" FontAttributes="Bold" FontSize="Small" TextColor="Black" />
<Label Grid.Row="3" Grid.Column="1" Text="{ Binding OpeningTime}" />
</Grid>
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
I am using this code but image is not loading. I ma new in Xamarin please guide me.

Answer 1

It's wrong, the images are placed within each native project. For Xamarin.Forms you should place the images in the Drawables folders.
If your project is android and ios ,you finally have two images : one in iosproject/Resources and one in AndroidProject/Resources/Drawab.
see Images Doc

Answer 2

If you want to load your images from the shared assembly. Ensure images are set as "EmbeddedResource" (Right Click: Properties, Build Action).

Answer 3

You have too add each image in there native Projects. here is a sample of how it should look like:
You can use the following plugin to generate your images for iOS:
Plugin: Link
For Android:
For IOS :
You can now reference your images in your xaml :
<Image Source="star_outline.png" />
<Image Source="star_selected.png" />
UPDATE:
In your xaml change:
<Image Grid.Row="1" Grid.Column="1" x:Name="Star" Source="{local:ImageResource Buffting.Images.star_outline.png}" />
with :
<Image Grid.Row="1" Grid.Column="1" x:Name="Star" Source="star_outline.png" />
The image should appear , This answers your main question. I'm not sure why your using IMarkupExtension , your not even calling it in the xaml

Answer 4

I had this same problem and found the answer in this thread. Embedded images not showing
When using the ImageResourceExtension the Source property should be prefixed with the Assembly Na