Avalonia: Cannot load <Image> in App.xaml - ControlTemplate

[alessandrofrancesconi]

I have the following items:

• /Assets folder containing some files like /Assets/logo_vertical_100w.png and /Assets/icon_gear.png. These files have BuildAction=None
• In the root, /App.xaml file where I declare a <ControlTemplate> like this (simplified):

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:MyProject.Desktop"
             xmlns:base="clr-namespace:MyProject.Desktop"
             xmlns:br="clr-namespace:MyProject.Desktop.Views"
             x:Class="MyProject.Desktop.App">
[...]
<ControlTemplate x:Key="MainWindowTemplate">
    <StackPanel>
        <Image Source="/Assets/logo_vertical_100w.png" />
    </StackPanel>
</ControlTemplate>

When running I receive an error for the logo image in App.xaml:

• If I declare it with Source="/Assets/logo_vertical_100w.png":

Portable.Xaml.XamlObjectWriterException: 'Could not convert object '/Assets/logo_vertical_100w.png' (of type System.String) to {clr-namespace:Avalonia.Media.Imaging;assembly=Avalonia.Visuals}IBitmap: Relative uri /Assets/logo_vertical_100w.png without base url'

• Tried also with Source="avares://Assets/logo_vertical_100w.png", but:

Portable.Xaml.XamlObjectWriterException: 'Could not convert object '/Assets/logo_vertical_100w.png' (of type System.String) to {clr-namespace:Avalonia.Media.Imaging;assembly=Avalonia.Visuals}IBitmap: Could not load file or assembly 'Assets, Culture=neutral, PublicKeyToken=null'. The system cannot find the file specified.

What's the correct way to set Image's source in shared templates?

[grokys]

Does it work if you put the image in e.g. the main window?

[alessandrofrancesconi]

If I use the image in MainWindow.xaml, it works using Source="/Assets/logo_vertical_100w.png"

[alessandrofrancesconi]

It seems that the URLs of resources are somehow broken when they are used into Application -> ControlTemplate elements

[grokys]

Ah ok, looks like we've not tested that case. @kekekeks might know why this is happening, if not I will take a look asap!

(Nice to see someone else from Bologna using Avalonia ;) )

[kekekeks]

Base url gets lost for some reason. Will probably be fixed by compiler

[alessandrofrancesconi]

Thank you for your support! I've discovered Avalonia and I'm trying to use it effectively for a project, I hope it will be fixed soon!

(@grokys you in Bologna, too? Of course a free beer would be a good prize for your help 👍 )

[Gillibald]

You could use the resm scheme and avoid the bug that way

[alessandrofrancesconi]

You could use the resm scheme and avoid the bug that way

Can you teach me how? Thanks

[Gillibald]

Just have a look at this: https://github.com/AvaloniaUI/Avalonia/blob/master/samples/ControlCatalog/Pages/TextBoxPage.xaml

[ShahroozAnsari]

I have This Problem Too And resm not work too

[alessandrofrancesconi]

Same to me. That example shows how to use resm with Fonts, is there a different way for images?
Also what Build Action to use with resm?

[Gillibald]

Same syntax as with fonts. You don't need the #Name part obviously. You also need to set the build action to embedded resource

[grokys]

Just investigated this and it seems to be a Portable.Xaml problem in that it's not looking in the right place for the base URL. I will look into fixing it, but given we're moving to a XAML compiler hopefully soon, I'm not sure how much time is worth spending on it.

In the meantime, the Source="avares://" syntax should work. However you need to actually supply the name of your assembly in the URL e.g.:

Source="avares://MyAssembly/Assets/logo_vertical_100w.png"

Note the MyAssembly part. Previously you were trying with Source="avares://Assets/logo_vertical_100w.png" and so it was looking for an assembly called Assets.

For more info see the docs: http://avaloniaui.net/docs/quickstart/assets

[alessandrofrancesconi]

It works with avares://! Thanks.

[grokys]

Should now be fixed in master by #2322

[TarrahArshad]

i have this problem but image path always show me error
Portable.Xaml.XamlObjectWriterException: 'Could not convert object '/Assets/activate_32x32_orange.png' (of type System.String) to {clr-namespace:Avalonia.Media.Imaging;assembly=Avalonia.Visuals}IBitmap: The resource /Assets/activate_32x32_orange.png could not be found.'
FileNotFoundException: The resource /Assets/activate_32x32_orange.png could not be found.

<Image Source="/Assets/activate_32x32_orange.png" />

i check build action and other guid but always show this error

[Gillibald]

Is the build action set to AvaloniaResource?

[SkyZero1228]

I am getting same error, how can I fix it?

[SkyZero1228]

the image is loaded in MainWindow.xaml but if I tried to load in other UserControl, then it failed like above.

[SkyZero1228]

Sorry, It works using like this

Source="avares://MyAssembly/Assets/logo_vertical_100w.png"

Thanks @grokys

[renjuashokan]

Hi @SkyZero1228,
How did the issue got fixed in Usercontrol?

I'm facing the same issue.

<Image x:Name="tiltImage" Source="avares://AvaloniaApplication2/Images/Suspend_Tilt_200px.png" Width="200" Height="200" Margin="5,5,5,5" />

works from MainWindow.xaml but not from a UserControl.
Can someone point out what I'm missing?