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

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Build and Launch AI Agents from Your Splunk Workflows

Splunk Cloud Application Management in Terraform

Get Agentic with Splunk Lantern: Connect to Cisco Cloud Control, Transform ...

Join the Conversation