Setting Image.Source to local image (added as "Content" to Assets/ folder in UWP project) leads to WASM app never going past the Splashscreen

[danielkornev]

OS: Windows 10, 1709, x64
Machine: ThinkPad X1 Carbon 4th Gen, 16GB RAM, Intel Core i7 6th gen (6600), 0.5TB SSD
Visual Studio: 2017 Pro, v 15.6.7
Python 2.7.x installed

[danielkornev]

Ok, figured out what the problem is:

If you add an image to UWP's Assets folder (or to any other location within the solution), and point image control's Source property to that image, an app would never complete loading.

[carldebilly]

If you put the image in the UWP asset folder (in the UWP Head project), it won't be available for other heads.

Is it possible for you to fork the repo and share a commit reproducing the problem? (or any other way to give us more information to reproduce it) I would love to fix the problem for you :-).

(by the way, congrats, you're the first one to report a bug on this repo!)

[danielkornev]

Hi Carl! Thanks for reaching out. I don’t know where I shall put the image for it to be reachable (and visible in UI) within the WASM app. If you can recommend me the step-by-step approach here it would solve the problem. By now, the only way I can show an image is by linking to an image hosted externally on the web. What I want is to add an image to the project, ship it with the project, and show it in the UI. Best Regards, Daniel Sent from Mail<https://go.microsoft.com/fwlink/?LinkId=550986> for Windows 10

…

________________________________ From: Carl de Billy <notifications@github.com> Sent: Tuesday, May 8, 2018 3:17:33 AM To: nventive/Uno Cc: Daniel Kornev; State change Subject: Re: [nventive/Uno] Setting Image.Source to local image (added as "Content" to Assets/ folder in UWP project) leads to WASM app never going past the Splashscreen (#1) If you put the image in the UWP asset folder (in the UWP Head project), it won't be available for other heads. Is it possible for you to fork the repo and share a commit reproducing the problem? (or any other way to give us more information to reproduce it) I would love to fix the problem for you :-). (by the way, congrats, you're the first one to report a bug on this repo!) — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub<#1 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AFBSq9N1GLMO3-9QmQF9mVtqpEt5ytAgks5twOQdgaJpZM4T1q_1>.

[jeromelaban]

@danielkornev "local" files should be available in the wasm app if the build action is set to Content. It seems that for now, wasm does not support this properly, we'll fix it.

Thanks for trying uno out !

[danielkornev]

They are available, indeed, but if I set Image.Source to such local file, app never finishes loading in web browsers. Get Outlook for Android<https://aka.ms/ghei36>

…

________________________________ From: Jérôme Laban <notifications@github.com> Sent: Tuesday, May 8, 2018 7:10:35 PM To: nventive/Uno Cc: Daniel Kornev; Mention Subject: Re: [nventive/Uno] Setting Image.Source to local image (added as "Content" to Assets/ folder in UWP project) leads to WASM app never going past the Splashscreen (#1) @danielkornev<https://github.com/danielkornev> "local" files should be available in the wasm app if the build action is set to Content. It seems that for now, wasm does not support this properly, we'll fix it. Thanks for trying uno out ! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#1 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AFBSq8GIg774ZV-54K3UjhGBnLtYdhILks5twcN7gaJpZM4T1q_1>.

[miguelrochefort]

Also make sure to use the ms-appx URI scheme:

<Image Source="ms-appx:///Assets/image.png" />

[MarkStega]

I can confirm that any reference to an image causes an error to be thrown during the load of that image. I tried both 'Source="/Assets/ImageName.png"' and 'Source="ms-appx:///Assets/ImageName.png"'. Both versions work in a UWP app; Neither work in wasm.

The first few lines of the error from the console:

mono.js:1 Error #1 "TypeError: Cannot read property 'toString' of undefined" executing javascript: "(function(t){document.title = t;})("Uno Playground");" put_char @ mono.js:1 mono.js:1 �[41m�[30mfail�[39m�[22m�[49m: Windows.UI.Core.CoreDispatcher[0] mono.js:1 Dispatcher unhandled exception mono.js:1 System.Exception: Failed to load Page Optimiser.NG.MainPage System.InvalidOperationException: This operation is not supported for a relative URI. mono.js:1 at System.Uri.get_Scheme () <0x1e38ba0 + 0x0001c> in <3d11b0248be143f5a11160eae8e61e3e>:0 mono.js:1 at Windows.UI.Xaml.Media.ImageSource.InitFromUri (System.Uri uri) <0x1e38a58 + 0x00010> in <c839eae4007e4ef3bcf083ab0250456d>:0 mono.js:1 at Windows.UI.Xaml.Media.Imaging.BitmapImage.OnUriSourceChanged (Windows.UI.Xaml.DependencyPropertyChangedEventArgs A_0) <0x1e4be58 + 0x00044> in <c839eae4007e4ef3bcf083ab0250456d>:0 mono.js:1 at Windows.UI.Xaml.Media.Imaging.BitmapImage+<>c.<.cctor>b__58_0 (Windows.UI.Xaml.DependencyObject s, Windows.UI.Xaml.DependencyPropertyChangedEventArgs e) <0x1e4be00 + 0x00024> in <c839eae4007e4ef3bcf083ab0250456d>:0 mono.js:1 at (wrapper delegate-invoke) <Module>.invoke_void_DependencyObject_DependencyPropertyChangedEventArgs(Windows.UI.Xaml.DependencyObject,Windows.UI.Xaml.DependencyPropertyChangedEventArgs) mono.js:1 at Windows.UI.Xaml.PropertyMetadata.RaisePropertyChanged (Windows.UI.Xaml.DependencyObject source, Windows.UI.Xaml.DependencyPropertyChangedEventArgs e) <0x1c50dc0 + 0x0002c> in <c839eae4007e4ef3bcf083ab0250456d>:0

[jeromelaban]

@MarkStega indeed, seems like a minor path parsing issue. Should be easy to fix :) Hang on for the source to be published.

[BeaumerF]

I updated my nugget packages and it doesn't work for me on wasm (uwp yes).
Source="ms-appx:///Assets/pictures/user.png"

[jeromelaban]

@BeaumerF The package that fixed this was not published, you can try updating again, it should work better now.

[BeaumerF]

@jeromelaban It still doesn't work on my project, the local images let the app on the splash screen (I updated, cleaned and built)

[danielkornev]

Still doesn't work. I've added an image to Assets folders in both UWP and Android projects, but image just doesn't shop up:

Here's what I expect to see:

Here's what I get instead (button has background color just to make sure it's positioned where it is):

My Android Phone is Samsung Note 8, with Android 8.0 (Oreo) on it.

Here's the layout I've built in XAML:

<Page
    x:Class="ZU.Assistant.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    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"
    mc:Ignorable="d" FontFamily="Segoe UI Black">
    
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Border Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="40" Background="#FF66AEE7">
            <TextBlock Text="ZET UNIVERSE: ASSISTANT" FontSize="18" FontFamily="Segoe UI Black" Foreground="White" FontWeight="Bold" HorizontalAlignment="Left" Height="17" Padding="0" Margin="25,11,0,0" VerticalAlignment="Top" Width="325" />
        </Border>

        <Button Height="50" Width="150" Content="Hello world!" VerticalAlignment="Center" HorizontalAlignment="Center" Click="Button_Click"/>

        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="52">
            <Button x:Name="speakToMeButton" HorizontalAlignment="Center" VerticalAlignment="Top" Width="50" Height="50" Padding="-2" Background="Transparent" BorderThickness="0">
                <Border Padding="0" Width="50" Height="50" Background="#FF66AEE7" CornerRadius="25" BorderThickness="1" BorderBrush="White">
                    <Image Width="48" Height="48" Source="ms-appx:///Assets/Mic-WF.png"/>
                </Border>
            </Button>
        </Grid>
    </Grid>
</Page>