ImageFill File Property does not work within a class

I have modified the Swipe-Places example ( so that the content resides inside a page class as follows and then I simply use a navigator to call the page from the main view.


<Page ux:Class="One">
	<Router ux:Dependency="router" />

			var Observable = require("FuseJS/Observable");

			var resetting = Observable(false);

			function City(name, imageKey, country, visitors, nonVisitors)
			{ = name;
				this.imageKey = imageKey; = country;
				this.visitors = Observable(visitors);
				this.nonVisitors = Observable(nonVisitors);
				this.degrees = -4 + (8 * Math.random());

			function reset(x) {
				resetting.value = true;
				setTimeout(backToNormal, 300);

			function backToNormal() {
				resetting.value = false;

			module.exports = {
			    cities : [
					new City("Oslo", "../Assets/Cities/Oslo.jpg", "NORWAY", 3127, 3943),
					new City("Paris", "../Assets/Cities/Paris.jpg", "FRANCE", 10250, 400),
					new City("San Francisco", "../Assets/Cities/San Francisco.jpg", "USA", 6700, 5421),
					new City("Seoul", "../Assets/Cities/Seoul.jpg", "KOREA", 5713, 4702),
					new City("Tokyo", "../Assets/Cities/Tokyo.jpg", "JAPAN", 4512, 657)
				visited: function(x)
					debug_log("Visited " +;
				notVisited: function(x)
					debug_log("Not visited " +;
				addVisitor: function(x)
				{ = + 1;
				removeVisitor: function(x)
				{ = - 1;
				addNonVisitor: function(x)
				{ = + 1;
				removeNonVisitor: function(x) { = - 1;
				reset: reset,
				resetting: resetting


			<Fuse.iOS.StatusBarConfig Style="Dark" />
			<Font File="../Assets/Fonts/Roboto-Regular.ttf" ux:Global="RobotoRegular" />
			<Font File="../Assets/Fonts/Roboto-Medium.ttf" ux:Global="RobotoMedium" />

			<Each Items="{cities}">
				<Panel Margin="0" Height="400" Width="293">
					<Rotation Degrees="{degrees}" />

					<DockPanel Margin="0" Height="100%" Width="100%">

						<Grid Columns="auto,1*,auto"  Margin="0,14,0,5" Dock="Top">
							<Image ux:Name="visited" File="../Assets/Emblems/visited.png" Margin="10,0,10,0" Opacity="0" Height="40" Alignment="VerticalCenter" />
							<StackPanel Alignment="VerticalCenter">
								<Text Value="{name}" FontSize="18" Alignment="Center" Font="RobotoRegular" Color="#434343" />
								<Text Value="{country}" FontSize="12" Alignment="Center" Font="RobotoMedium" Color="#c4c4c4" Margin="0,-3,0,10" />
							<Image ux:Name="notVisited" File="../Assets/Emblems/notvisited.png" Margin="10,0,10,0" Opacity="0"  Height="40" Alignment="VerticalCenter" />

						<Image ux:Name="visitedOverlay" StretchMode="UniformToFill" File="../Assets/Emblems/VisitedOverlay.png" Opacity="0" Dock="Fill" />
						<Image ux:Name="notVisitedOverlay" StretchMode="UniformToFill" File="../Assets/Emblems/NotVisitedOverlay.png" Opacity="0" Dock="Fill" />
						<Rectangle Dock="Fill">
							<ImageFill File="{imageKey}" StretchMode="UniformToFill" WrapMode="ClampToEdge" />

						<Grid Columns="1*,1,1*" Margin="0,0,0,0" Dock="Bottom" Height="55">
							<StackPanel Padding="0,5,1,5" Margin="0,0,1,0">
								<Text FontSize="22" Alignment="Center" Font="RobotoMedium" Value="{visitors}" />
								<Text FontSize="12" Alignment="Center" Font="RobotoRegular" Color="#c4c4c4">HAVE BEEN HERE</Text>
							<Rectangle Color="#e5e5e5" />
							<StackPanel Padding="0,5,0,5">
								<Text FontSize="22" Alignment="Center" Font="RobotoMedium" Value="{nonVisitors}" />
								<Text FontSize="12" Alignment="Center" Font="RobotoRegular" Color="#c4c4c4">HAVEN'T VISITED</Text>
					<Rectangle Color="White" Margin="0" Height="100%" Width="100%">
						<Shadow Distance="0" Size="2" ux:Name="shadow" />

					<InForceFieldAnimation ForceField="visitedAttractor" From="0.1" To="0.3">
						<Change visited.Opacity="1" Duration="1" />
						<Change visitedOverlay.Opacity="1" Duration="1" />

					<InForceFieldAnimation ForceField="visitedAttractor">
						<Rotate Degrees="-8" />

					<InForceFieldAnimation ForceField="notVisitedAttractor" From="0.1" To="0.3">
						<Change notVisited.Opacity="1" Duration="1" />
						<Change notVisitedOverlay.Opacity="1" Duration="1" />

					<InForceFieldAnimation ForceField="notVisitedAttractor">
						<Rotate Degrees="8" />

					<EnteredForceField ForceField="visitedAttractor" Threshold="0.9" Handler="{visited}" />
					<EnteredForceField ForceField="notVisitedAttractor" Threshold="0.9" Handler="{notVisited}" />

					<EnteredForceField ForceField="visitedAttractor" Threshold="0.05" Handler="{addVisitor}" />
					<ExitedForceField ForceField="visitedAttractor" Threshold="0.05" Handler="{removeVisitor}" />
					<EnteredForceField ForceField="notVisitedAttractor" Threshold="0.05" Handler="{addNonVisitor}" />
					<ExitedForceField ForceField="notVisitedAttractor" Threshold="0.05" Handler="{removeNonVisitor}" />

					<Draggable />

						<BringToFront />
						<Scale Factor="1.1" Duration="0.5" Easing="BackOut" />
						<Change shadow.Distance="20" Duration="0.5" Easing="BackOut" />
						<Change shadow.Size="20" Duration="0.5" Easing="BackOut" />


			<PointAttractor ux:Name="centerAttractor" Radius="800" Strength="250" />
			<PointAttractor ux:Name="notVisitedAttractor" Offset="-400,0,0" Radius="380" Strength="600" />
			<PointAttractor ux:Name="visitedAttractor" Offset="400,0,0" Radius="380" Strength="600" />

			<WhileTrue Value="{resetting}">
				<Change centerAttractor.Radius="8000" />
				<Change centerAttractor.Strength="10000" />


			<Image Clicked="{reset}" Height="64" Width="64" File="../Assets/Icons/Refresh.png" />



<App Background="#CCC">

	<Router ux:Name="router" />
		<Navigator DefaultPath="one">
			<One ux:Template="one" router="router" />

However, there’s a ImageSource error: ‘BundleFileImageSource-failed-conversion’ error. This is exactly the same problem that I am facing in my project because the image tags are all inside page classes. From the examples I have seen so far, the image tags are located inside the mainview and it works. Is there a reason why it does not work within a class/component?

There seems to be a little confusion about file paths, it seems. When debugging, I got an error reporting that the files couldn’t be found, so I changed the cities in One.ux JavaScript to this:

cities : [
    new City("Oslo", "Assets/Cities/Oslo.jpg", "NORWAY", 3127, 3943),
    new City("Paris", "Assets/Cities/Paris.jpg", "FRANCE", 10250, 400),
    new City("San Francisco", "Assets/Cities/San Francisco.jpg", "USA", 6700, 5421),
    new City("Seoul", "Assets/Cities/Seoul.jpg", "KOREA", 5713, 4702),
    new City("Tokyo", "Assets/Cities/Tokyo.jpg", "JAPAN", 4512, 657)

And now it works just fine!

File paths need to be relative to the place of the instance of the ux:Class (that’s where you use it in UX, MainView.ux in this case), not where the class declaration lives in the folder tree.

Hope this helps!