The simplest way to use custom resources (for example, images) in a widget is to host them on an external server. The visitor’s browser then accesses them from that location.

It is also possible to bundle custom images within the file structure of a widget. When the extension is uploaded, the images are copied to a directory on the VFS, and you can access them via the Widget Asset Mappings. If you have an image ‘image1.png’ stored in the images/ directory of your widget, you can reference that resource in JavaScript with the following snippet:

widget.assetMappings["/images/image1.png"]();

The asset mapping is an observable, so use parentheses in JS code to extract the value.

You can also access the asset mapping from a knockout template, and be aware of the current binding context (for example, if inside a loop, you may need to use $parent to get back to the widget context). The sample below shows the HTML for an asset mapping:

<img class="product-item-img" data-bind="attr: {src: assetMappings[ productImage ] }">