Image file resource Bug in JavaScript

Bug Reports
1

Fuse version : 0.20.2 (build 6524)

O/S : Windows 8.1

I find bug of Image file resource.

If I writed code like this

  <App>
      <StackPanel>
          <Image File="{imagePath}" />
      </StackPanel>
  </App>

No error.

But if I writed code like this

<App>
    <JavaScript>
        var Observable = require("FuseJS/Observable")
        var imagePath = Observable("Assets/black.png")

        module.exports = {
            imagePath: imagePath
        };
    </JavaScript>

    <StackPanel>
        <Image File="{imagePath}" />
    </StackPanel>
</App>

I will see erroe message like this

"Could not find file ‘C:\Program Files(x86)\Sublime Text 3\Assets\balck.png’. Please see the Fuse Monitor (Cmd/Ctrl+M) for details.

MainView.ux exist ‘D:\App\BugReport’.

2

Hi there,

Currently it’s not possible to databind using the File property directly, unless the image is already added to your project as a Bundle file.

Two ways around this:

  1. Ensure the image is a bundle file in your app. For example, in the Includes section in your .unoproj:
  "Includes": [
    "*",
    "black.png:Bundle"
  ]
  1. Use FileImageSource resources and use a DataToResource binding to select which source the Image would display. Example:
<App>
    <JavaScript>
        module.exports = {
            selector: "kitten"
        };
    </JavaScript>

    <FileImageSource File="assets/kitten.jpg" ux:Key="kitten" />
    <FileImageSource File="assets/puppy.jpg" ux:Key="puppy" />

    <Image Source="{DataToResource selector}" />
</App>
3

Thanks for your reply.

I will try second way. :slight_smile: