I am building menu items with image icons that when clicked will open the page.
In my MyApp.js I first setup an array containing the data of my menu items:
var icons_path = 'assets/icon/';
var app_pages = [
{'name':'HOME','ux':'homePage','icon':icons_path + 'page-home.png'},
{'name':'ABOUT','ux':'aboutPage','icon':icons_path + 'page-about.png'},
{'name':'TUTORIALS','ux':'tutorialsPage','icon':icons_path + 'page-tutorials.png'},
{'name':'PORTFOLIO','ux':'portfolioPage','icon':icons_path + 'page-portfolio.png'},
{'name':'PRODUCTS','ux':'productsPage','icon':icons_path + 'page-products.png'},
{'name':'CONTACT','ux':'contactPage','icon':icons_path + 'page-contact.png'}
];
function go_to_page(args){
router.push(args.data.ux);
}
module.exports = {
app_pages: app_pages,
go_to_page: go_to_page
};
Then in my MyApp.ux I loop through each item using <Each>
:
<App>
<Router ux:Name="router" />
<JavaScript File="MyApp.js" />
<StackPanel>
<Each Items="{app_pages}">
<StackPanel Clicked="{go_to_page}">
<Image File="{icon}" Height="32" Width="32" Margin="0,10,0,10" Color="#7a96b2" />
<Text Value="{name}" Width="150" TextAlignment="Center" FontSize="15" Color="#414f5e" Margin="0,0,0,0">
<Font File="assets/fonts/Lato-Bold.ttf" />
</Text>
</StackPanel>
</Each>
</StackPanel>
</App>
Using the fuse preview window, the menu icons are showing up correctly
But when I export using the command fuse build --target=Android --configuration=Release
then install the apk on my mobile - it doesn’t show the menu icons.
It works when I put the image path directly to the File="" like this:
<Each Items="{app_pages}">
<StackPanel Clicked="{go_to_page}">
<Image File="assets/icon/page-home.png" Height="32" Width="32" Margin="0,10,0,10" Color="#7a96b2" />
<Text Value="{name}" Width="150" TextAlignment="Center" FontSize="15" Color="#414f5e" Margin="0,0,0,0">
<Font File="assets/fonts/Lato-Bold.ttf" />
</Text>
</StackPanel>
</Each>
Any help would be greatly appreciated.
Thanks!