image path binding

General
1

Hi there, I am stuck in a test app because can’t bind an image relative path, member of an observable collection.

Let’s say this is the observable:

function categorie( etic,cattnt,catcn,imagepath) { this.etic=etic; this.cattnt=cattnt; this.ctcn=catcn; this.imagepath=imagepath; } var categorie= Observable( new categorie (“Jazz”, “4”, “1”, “assets/1.jpg”), new categorie (“Pop”, “4”, “1”, “assets/2.jpg”), … );

When I bind the observable to a UX Each loop, the compiler assumes the Fuse tools path, and not the relative path specified. To make it simple, it doesn’t work :

 <Each Items="{categorie}">
    <Image File="{imagepath}" /> 
</Each>

While it works :
<Each Items="{categorie}">
    <Image File="assets/1.jpg" /> 
</Each>

Strange , isnt it. Have tried with Url attribute, no joy.
And, furthermore, how can I concatenate a string with a binding element, something like :
    <Image File="assets/{number}.jpg" /> 
Thanks Max
2

Hi!

You would typically do this using a FileImageResource and the DataToResource-binding if you want to bind to things that are bundled with your project.

This section of the handbook explains it: https://www.fusetools.com/learn/fuse#ref-datatoresource

Also, the SwipePlaces-example uses this technique: https://www.fusetools.com/community/examples/swipeplaces

If you were to bind to something outside the app, you would typically use Image Url="{binding}", so relative paths wouldn’t be an issue.

3

I already tried with FileImageResource before posting, but it is not applicable inside an Each loop ‘Each’ does not have any content properties that accept ‘FileImageSource’

Url attribute doesn’t work either, relative url are translated with Fuse compiler path + relative url.

Path is not outside the app, is just a subdirectory /assets.

Max

4

I got a workaround, it works fine if the preview is generated by CLI, from the same folder of the project. If I start a preview from Fuse dashboard or from Sublime 3 it doesn’t work.

THanks guys Max

5

Hi!

You need to use DataToResource on a property when you use FileImageResource. SwipePlaces does this in an Each, so you could look at that for an example.

If you find a case that works in DotNetExe but not with preview, I am sure The Guys would love to know about it. :slight_smile:

6

Hello Cocporn I had a look on Swipeplace but it seems that FileImageResource is used outside the Each. Indeed I could not find an example where an image source comes from an observable (but honestly I didn’t open all the example apps).

Anyway I can confirm after further tests that if a relative path is coming from an observable (no problem if statically in the UX) is associated by the compiler with something like ‘current directory’ + relative path. It’s ok if “fuse build” is started from a prompt in the project directory. If preview is launched from sublime, sublime exe path is associated…

Thank you Max

7

As Fuse rewrites the assets, and rebundles them, you cannot use a filepath from a variable. Neither Observable nor other. You need to use FileImageResource. The FileImageResource needs to be defined outside the Each like you say, and like it is done in SwipePlaces, but can be references from inside the Each like in SwipePlaces:

<Each Items="{citys}">
...
    <Image Source="{DataToResource imageKey}" Margin="0" StretchMode="UniformToFill" Dock="Fill" />
...
</Each>