I recently wanted to render base64 images dynamically in a dashboard, and got this to work...
1) Create Javascript file "dynamicImage.js" that monitors value changes of token "tokBASE64", then injects value into src attribute of img tag "imgDynamic".
require([
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'
], function ($, mvc,) {
var submittedTokens = mvc.Components.get('submitted');
submittedTokens.on("change:tokBASE64", function(model, tokBASE64, options) {
var tokHTMLJS=submittedTokens.get("tokBASE64");
if(tokHTMLJS!==undefined) {
document.getElementById("imgDynamic").src = "data:image/jpeg;base64," + tokHTMLJS;
}
});
});
2) Place dynamicImage.js in your Splunk Searchhead
$SPLUNK_HOME/etc/apps/<your app>/appserver/static
3) Restart Searchhead so the new static content will be picked up.
In your XML dashboard source:
4) Reference the JS in the initial form/dashboard tag
<form script="dynamicImage.js">
5) Assign base64 content to tokBASE64 when search is completed. I used Fields to suppress displaying base64 in table.
<search>
<query>index=peoples personID=12345 | table personID, Firstname, Lastname, PhotoBase64</query>
<finalized>
<set token="tokBASE64">$result.PhotoBase64$</set>
</finalized>
<fields>["personID","Firstname","Lastname"]</fields>
</search>
6) Add a HTML panel in your XML dashboard source, consisting of img tag
<panel>
<html>
<div>
<img id="imgDynamic" src=""/>
</div>
</html>
</panel>
Done !
... View more