Image not displaying - xamarin emdeded resource Image data was invalid: Xamarin.Forms.StreamImageSource

Question

I'm following this example of using images as embedded resources.

I've set the image as an embedded resource, added the extension and the reference to it in XAML, used the full path(using a dot as a separator) but the image is not displayed. I've set a breakpoint in the extension and it gets hit. Both the code and the XAML are equivalent to the linked example (only the path to the image is different).

I get the following error in the output window: ImageLoaderSourceHandler: Image data was invalid: Xamarin.Forms.StreamImageSource

Any ideas?

Answer 1

I hit the same issue while following the same tutorial. Luckily debugging helped to solve my issue, maybe it might help you as well.

Having the error: "ImageLoaderSourceHandler: Image data was invalid: Xamarin.Forms.StreamImageSource" I decided to have a look to the source code for that.

It prints this error only in the circumstances when bitmap is null. But wait. I know that my bitmap is not null so the problem must lie in between - the path must be incorrect. Using the debugging code that they posted in the same article, invoked in the constructor:

private void CheckResourcesFound()
{
  // ...
  // NOTE: use for debugging, not in released app code!
  var assembly = typeof(<class-name-this-method-is-in>).GetTypeInfo().Assembly;
  foreach (var res in assembly.GetManifestResourceNames())
  {
    System.Diagnostics.Debug.WriteLine("found resource: " + res);
  }
}

I have noticed what @pnet already pointed out - the path needs to be constructed in this way

<assembly>.<folders-separated-by-dot>.<resource-with-extension>

My pic was in Resource dir. Assuming yours is as well then your xaml should look like:

<Image Source="{local:ImageResource 'projectname.Resources.imagename.png'}" .../>

After adjusting and compiling and finally running I eventually could see the pic I wanted in my app :)

Answer 2

you must to create a converter as this:

[ContentProperty ("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;
         }
        }

and here your UI

xmlns:local="clr-namespace:projectname;assembly=projectname"

<ContentPage.Content>
        <StackLayout Spacing="10" Orientation="Vertical" x:Name="MainLayout">
            <Image Source="{local:ImageResource projectname.imagename.png}"></Image>
        </StackLayout>
    </ContentPage.Content>

I hope help you.

EDIT1

With me is working. See the screenshot

My 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:Operacional"
             x:Class="Operacional.MainPage">

    <ContentPage.Content>

        <StackLayout Spacing="10" Orientation="Vertical" x:Name="Layout">

            <StackLayout HorizontalOptions="CenterAndExpand" Orientation="Horizontal">
                <Image  Source="{local:ImageResource Operacional.Images.automotive.png}"></Image>
                <local:Badge x:Name="OcupacaoNotifications" BoxColor="Red"
                             WidthRequest="18" HeightRequest="18" 
                             VerticalOptions="Center" HorizontalOptions="Center">
                    <x:Arguments>
                        <x:Double>30</x:Double>
                        <x:Double>10</x:Double>
                    </x:Arguments>
                </local:Badge>
            </StackLayout>

        </StackLayout>

    </ContentPage.Content>

</ContentPage>

My class

[ContentProperty("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;
        }
    }

With this code i got to see the image above

<Image Source="{local:ImageResource Operacional.Images.automotive.png}">

NameSpace.FolderName.ImageName.extension

Answer 3

I was fighting with this example, trying to get it to work in my code, with no luck. Until I realized the example wasn't using a shared project, and the assembly name for each platform's app is different, so the XAML can't find it and include the ImageResourceExtension. I renamed the output assembly in both platform projects, and it worked.

Took me several hours to find that nugget.

Answer 4

I don't know if you still need answers to this after 4 years but you probably forgot to set the image Build Action to Embedded resource.

In VS 2022 you do this by clicking on the image in the Solution Explorer. In the
Build Action property you select Embedded resource.