Images

Wisej.NET themes can use relative image URLs, absolute image URLs, embedded base64 images, and named images. The supported image formats are: png, gif, svg, jpg and bmp. The table below describes how to use each image type.

Image TypeDescription

Relative URL

Any image or icon property or style in the theme can use a relative image URL. i.e. "/images/logo.gif". Wisej will load the image relative to the application's URL.

Absolute URL

Any image or icon property or style in the theme can use an absolute image URL. i.e. "http://google-images.com/fake-image.jpeg".

Embedded base64

Any image or icon property or style in the theme can use the base64 embedded notation. i.e. "data:image/svg+xml;base64,PD9...".

Named Images

In addition to the image URL and embedded base64 images, Wisej.NET themes define their own named images. It's basically an image-indirection table.

Once you declare an image in the images section, the theme can use that image by name. This feature gives you the enormous benefit of being able to change an image (icon) in one place in the theme file without having to change it all over the theme i.e., change the window-close icon to change it in all the components that use window-close.

Example of named images:

"images": {
    "baseUrl": "",
    "blank": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA...",
    "checkbox-checked": "data:image/svg+xml;base64,PD94bWwgdmV...",
    "checkbox-undefined": "data:image/svg+xml;base64,PD94bWwg...",
    "checkbox": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj...",
...

Notice the baseUrl property under images. It's the root URL that Wisej.NET uses for named images that are defined using a relative URL. i.e. "checkbox": "images/cool-checkbox.png".

Using the baseUrl allows you to switch the entire icon set simply by changing the baseUrl.

Last updated