Specifies an image file as a data source to be displayed by an Image element.

The file pointed to by the File property will be added to the app as a bundle file automatically.

Example

This example displays an image from the file kitten.jpg:

<Image>
    <FileImageSource File="kitten.jpg" />
</Image>

Referencing from JavaScript

When building your project, Fuse needs to know which files to bundle with the app. Since UX is statically compiled, it will automatically bundle files whose path is hard-coded in one of the UX files in your project.

However, if the path comes from JavaScript or some other dynamic data source, it cannot automatically be inferred by the compiler. Thus, we need to explicitly specify it as a bundle file in our .unoproj:

"Includes": [
    "assets/kitten.jpg:Bundle"
]

We can now use JavaScript to specify the path to the image:

<JavaScript>
    module.exports = {
        image: "assets/kitten.jpg"
    }
</JavaScript>

<Image>
    <FileImageSource File="{image}" />
</Image>

Location

Namespace
Fuse.Resources
Package
Fuse.Elements 1.9.0

Interface of FileImageSource

Policy : MemoryPolicy ux

Specifies a hint for how the file resource should be kept in memory and when it can be unloaded.

Inherited from ImageSource

Inherited from PropertyObject

Inherited from object

Attached UX Attributes

GlobalKey (attached by Resource) : string ux

The ux:Global attribute creates a global resource that is accessible everywhere in UX markup.