Class ImageBundle

Maps from keys to base64 encoded images or file locations. All values must be URLs or use the format data:image/format followed by a comma and the base64 encoded image data, e.g. "data:image/gif,XYZ", where XYZ is the base64 encoded image data.

To add a new image bundle to an existing graph, the following code is used:

const bundle = new ImageBundle(alt);
bundle.putImage('myImage', 'data:image/gif,R0lGODlhEAAQAMIGAAAAAICAAICAgP' +
  '//AOzp2O3r2////////yH+FUNyZWF0ZWQgd2l0aCBUaGUgR0lNUAAh+QQBCgAHACwAAAAA' +
  'EAAQAAADTXi63AowynnAMDfjPUDlnAAJhmeBFxAEloliKltWmiYCQvfVr6lBPB1ggxN1hi' +
  'laSSASFQpIV5HJBDyHpqK2ejVRm2AAgZCdmCGO9CIBADs=', fallback);
bundle.putImage('mySvgImage', 'data:image/svg+xml,' + encodeURIComponent(
  '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">' +
  '<linearGradient id="gradient"><stop offset="10%" stop-color="#F00"/>' +
  '<stop offset="90%" stop-color="#fcc"/></linearGradient>' +
  '<rect fill="url(#gradient)" width="100%" height="100%"/></svg>'), fallback);
graph.getPlugin<ImageBundlePlugin>('image-bundle')!.addImageBundle(bundle);
Copy

ImageBundlePlugin must be registered on the graph. It ships in getDefaultPlugins and is therefore loaded by Graph out of the box; BaseGraph users must add it explicitly via the plugins option.

Alt is an optional boolean (default is false) that specifies if the value or the fallback should be returned in getImage.

The image can then be referenced in any cell style using image=myImage. If you are using mxOutline, you should use the same image bundles in the graph that renders the outline.

The keys for images are resolved in AbstractGraph.postProcessCellStyle and turned into a data URI if the returned value has a short data URI format as specified above.

A typical value for the fallback is an HTML link as defined in RFC 2557. Note that this format requires a file to be dynamically created on the server-side, or the page that contains the graph to be modified to contain the resources. This can be done by adding a comment that contains the resource in the HEAD section of the page after the title tag.

Note about the fallback property

The fallback mechanism was developed in mxGraph for browsers that did not support data URIs (mainly Internet Explorer 6 and 7). In maxGraph, this feature is under review and will probably be removed in a future release. If you rely on this feature, please let us know by creating an issue in the GitHub repository.

This type of fallback mechanism should be used in IE6 and IE7. IE8 does support data URIs, but the maximum size is limited to 32 KB, which means all data URIs should be limited to 32 KB.