How to bind to (many) images bundled with project?

How-to Discussions
1

Hello

I have the following UX Markup and JavaScript:

<Image File="{logo}" />


var companies = [{ logo: "a-logo.png" }, { logo: "another-logo.png" }, { logo: "yet-another-logo.png }]
var logo = Observable();

function nextCompany() {
  index++;
  logo.value = companies[index].logo;
}

module.exports = {
    logo: logo
}

The above results in the error Could not find a part of the path 'C:\Program Files (x86)\Fuse\Assets\a-logo.png' (...).

I found a similar thread, image path binding, where the solution was to use FileImageResource. I verified that it works, but since my app has a lot of logos/images, I’d like to avoid having to (manually) specify a FileImageResource for each, e.g.

<FileImageSource ux:Key="a-logo" File="Assets/a-logo.png" />
<FileImageSource ux:Key="another-logo" File="Assets/another-logo.png" />
<FileImageSource ux:Key="yet-another-logo" File="Assets/yet-another-logo.png" />
... and hundreds more...

Anyone?

2

As mentioned in Adding Image dynamically using each, images need to be declared in UX files in order to be bundled into the app. Looking forward to the option of specifying files to bundle in unoproj as specifying a FileImageSource for each image is painful when you have many images.