How to add an image?

Store the image file near the guiInit function and ensure that it is distributed with the app code.

The file itself cannot be sent to the browser. Instead the information in the image must be encoded with the encodeImage util:

encoded_value = utils.encodeImage(
    os.path.join(os.path.dirname(__file__), "logo.png")
)

encodedValue = utils.encodeImage( ...
    fullfile(fileparts(mfilename("fullpath")), "logo.png"));

The encoded value can then be sent to the browser.

Note that the encodeImage function expects the absolute path to the file. For portability it is best to derive the absolute path from the path relative to the file where the function is used. In the examples above the "logo.png" file is stored next to the file where util is called.

The image can be:

  • shown as a logo in the app's navigation bar.
  • shown in the app in a HtmlElement. Its setLocalImage method does the encoding for you.
  • made available to other components by putting the encoded value in a Hidden component.