About Image loading of Example: Social Media Mock App

How-to Discussions
1 
<Image Url="{imageUrl}" />

The example used above coding to load image for EACH item.

If I want to use local path to load. I tried

<Image File="{imagePath}" />

but failed with ERROR:

Exception: System.Exception: Marshal.ToType(): Unable to convert images/image01.jpg to type Uno.UX.FileSource 
...

How can I make it possible in JS instead of UNO?

Big Thanks!.

2

<Image File="localpath"/> should work, except you won’t really be able to use that in an Each item. The localpath must be constant. This is how we determine which files to bundle into the application while packaging.

If you give me a UX example of about what you want I can probably give you an approach that can work.

3

In my example below I use FileImageSource with ux:Key to create resources. The {DataToResource icon} then uses the string stored at icon as the key to lookup the resource. The end result is a list of items with attached images.

<Panel>
    <FileImageSource ux:Key="IconBag" File="icons_200/bag.png"/>
    <FileImageSource ux:Key="IconBeaker" File="icons_200/beaker.png"/>
    <FileImageSource ux:Key="IconBowling" File="icons_200/bowling.png"/>

    <JavaScript>
        var Observable = require("FuseJS/Observable");
        module.exports = {
            data: [
                { name: "Fancy Bag", icon: "IconBag" },
                { name: "Bubbly", icon: "IconBeaker" },
                { name: "Strike!", icon: "IconBowling" },
            ],
        }
    </JavaScript>
    <StackPanel Alignment="Center" ItemSpacing="10">
        <Each Items="{data}">
            <StackPanel Orientation="Horizontal" Padding="10">
                <SolidColor Color="0.9,0.9,0.92,1"/>
                <Image Source="{DataToResource icon}" Height="60"/>
                <Text Value="{name}" FontSize="30"/>
            </StackPanel>
        </Each>
    </StackPanel>
</Panel>

This works now. We’re looking further at other ways to use resources this way in JS.

4

edA-qa mort-ora-y:

Thank you for reply and it’s what I want.

I tried and it works.

However, let’s say I have to display more than hundred of images, it would be a bit messy.

I look forward to a better way to do this in the future. Thanks!

5

That’s exactly my concern as well.

Having a large amount of local embedded image assets is very common for games (e.g. equipment or items), and usually these are stored either in a database or JSON record. It will be better if somehow I can include everything in a subfolder instead of including them one by one. Maybe this will be done by the future Fuse IDE?

6

Exact7ly. I agree with Vicker.

7

We will be looking at more options. But if you already deal with a DB, or a file, you might also have some build scripts on your project. UX is designed to be simple enough to emit the boilerplate part quite easily for your resources.

That FileImageSource fragment could be generated into a standalone UX file, typically a Style, and then include that in the root of your UI. All those resources are then available by name throughout the UI.