Solved: Embedding Base64 image into dashboard

pratyushak · ‎03-12-2019

I have a static image I want to embed on dashboard which is actually a logo. Using Splunk Enterprise, I am only allowed to convert image to base64 and use HTML to embed it. I wrote the below in source code and still not able to see anything except the title for the image in the dashboard. Pls help.

chrisyounger · ‎03-12-2019

This works for me:

<dashboard>
  <label>test</label>
  <row>
         <html>
         <div style="height: 200px; width:200px; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAADNCAMAAAAsYgRbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABJQTFRF3NSmzMewPxIG//ncJEJsldTou1jHgAAAARBJREFUeNrs2EEKgCAQBVDLuv+V20dENbMY831wKz4Y/VHb/5RGQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0PzMWtyaGhoaGhoaGhoaGhoaGhoxtb0QGhoaGhoaGhoaGhoaGhoaMbRLEvv50VTQ9OTQ5OpyZ01GpM2g0bfmDQaL7S+ofFC6xv3ZpxJiywakzbvd9r3RWPS9I2+MWk0+kbf0Hih9Y17U0nTHibrDDQ0NDQ0NDQ0NDQ0NDQ0NTXbRSL/AK72o6GhoaGhoRlL8951vwsNDQ0NDQ1NDc0WyHtDTEhDQ0NDQ0NTS5MdGhoaGhoaGhoaGhoaGhoaGhoaGhoaGposzSHAAErMwwQ2HwRQAAAAAElFTkSuQmCC)">
         </div>
         </html>
       </row>
</dashboard>

View solution in original post

chrisyounger · ‎03-12-2019

This works for me:

<dashboard>
  <label>test</label>
  <row>
         <html>
         <div style="height: 200px; width:200px; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAADNCAMAAAAsYgRbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABJQTFRF3NSmzMewPxIG//ncJEJsldTou1jHgAAAARBJREFUeNrs2EEKgCAQBVDLuv+V20dENbMY831wKz4Y/VHb/5RGQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0PzMWtyaGhoaGhoaGhoaGhoaGhoxtb0QGhoaGhoaGhoaGhoaGhoaMbRLEvv50VTQ9OTQ5OpyZ01GpM2g0bfmDQaL7S+ofFC6xv3ZpxJiywakzbvd9r3RWPS9I2+MWk0+kbf0Hih9Y17U0nTHibrDDQ0NDQ0NDQ0NDQ0NDQ0NTXbRSL/AK72o6GhoaGhoRlL8951vwsNDQ0NDQ1NDc0WyHtDTEhDQ0NDQ0NTS5MdGhoaGhoaGhoaGhoaGhoaGhoaGhoaGposzSHAAErMwwQ2HwRQAAAAAElFTkSuQmCC)">
         </div>
         </html>
       </row>
</dashboard>

pratyushak · ‎03-13-2019

worked!! thanks!!

vnravikumar · ‎03-12-2019

Hi @pratyushak

Try this and let me know.

<dashboard script="logo.js">
  <label>logo</label>
  <row>
    <panel>
      <html>
        <table>
          <tr>
            <td>
               <img id="imgDynamic"/>
            </td>
            <td>
              <h1>Title</h1>
            </td>
          </tr>
        </table>
      </html>
    </panel>
  </row>
</dashboard>

Javascript: logo.js

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
 ], function ($, mvc,) {

              document.getElementById("imgDynamic").src = "data:image/png;base64," + "iVBORw0KGgoAAAANSUhEUgAAAM0AAAD              NCAMAAAAsYgRbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5c" +
              "cllPAAAABJQTFRF3NSmzMewPxIG//ncJEJsldTou1jHgAAAARBJREFUeNrs2EEK" +
              "gCAQBVDLuv+V20dENbMY831wKz4Y/VHb/5RGQ0NDQ0NDQ0NDQ0NDQ0NDQ" +
              "0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0PzMWtyaGhoaGhoaGhoaGhoaGhoxtb0QGho" +
              "aGhoaGhoaGhoaGhoaMbRLEvv50VTQ9OTQ5OpyZ01GpM2g0bfmDQaL7S+ofFC6x" +
              "v3ZpxJiywakzbvd9r3RWPS9I2+MWk0+kbf0Hih9Y17U0nTHibrDDQ0NDQ0NDQ0" +
              "NDQ0NDQ0NTXbRSL/AK72o6GhoaGhoRlL8951vwsNDQ0NDQ1NDc0WyHtDTEhD" +
              "Q0NDQ0NTS5MdGhoaGhoaGhoaGhoaGhoaGhoaGhoaGposzSHAAErMwwQ2HwRQ" +
              "AAAAAElFTkSuQmCC";

});

Embedding Base64 image into dashboard

Easily Improve Agent Saturation with the Splunk Add-on for OpenTelemetry Collector

Explore the Latest Educational Offerings from Splunk [January 2025 Updates]

Developer Spotlight with Paul Stout