Dashboards & Visualizations

How to place an image in one panel?

patra966
Path Finder

I want to place an image in one panel. Below you can see the thumbs up image that I am trying to use.
alt text

For testing purposes please use this image https://raw.githubusercontent.com/rajapatra/Test/master/bg.jpg

Thanks in advance.

Tags (2)
0 Karma
1 Solution

manjunathmeti
Champion

Place your image in your app $SPLUNK_HOME/etc/apps/my_app/appserver/static

And your image in a panel like below:

<panel>
      <html>
          <img src="/static/app/my_app/success.png " width="500" height="500" style="margin-left: 100px; margin-left: auto"/>
      </html>
</panel>

Sample xml,

<form>
  <label>Test</label>
  <row depends="$dontShowThisRow$">
    <panel>
      <single>
        <search>
          <query>| makeresults | eval perc="96%"</query>
          <done>
            <set token="perc">$result.perc$</set>
          </done>
        </search>
      </single>
    </panel>
  </row>
  <row>
    <panel id="test">
      <html>
        <style>
          #test h1 {
          font-size: 75.9px;
          margin-bottom: 25px;
          margin-top: 20px;
          }
        </style>
        <h1>$perc$</h1>
        <img src="https://raw.githubusercontent.com/rajapatra/Test/master/bg.jpg" width="100" height="100" style="margin-left: auto"/>
      </html>
    </panel>
  </row>
</form>

View solution in original post

manjunathmeti
Champion

Place your image in your app $SPLUNK_HOME/etc/apps/my_app/appserver/static

And your image in a panel like below:

<panel>
      <html>
          <img src="/static/app/my_app/success.png " width="500" height="500" style="margin-left: 100px; margin-left: auto"/>
      </html>
</panel>

Sample xml,

<form>
  <label>Test</label>
  <row depends="$dontShowThisRow$">
    <panel>
      <single>
        <search>
          <query>| makeresults | eval perc="96%"</query>
          <done>
            <set token="perc">$result.perc$</set>
          </done>
        </search>
      </single>
    </panel>
  </row>
  <row>
    <panel id="test">
      <html>
        <style>
          #test h1 {
          font-size: 75.9px;
          margin-bottom: 25px;
          margin-top: 20px;
          }
        </style>
        <h1>$perc$</h1>
        <img src="https://raw.githubusercontent.com/rajapatra/Test/master/bg.jpg" width="100" height="100" style="margin-left: auto"/>
      </html>
    </panel>
  </row>
</form>

efavreau
Motivator

I would personally do it like in the sample xml above, not in the appserver/static directory on the server. Referencing it from a place where you can control the file and you can access it freely, means you can upload or change it as needed without getting your Splunk Admins involved.

###

If this reply helps you, an upvote would be appreciated.
0 Karma
Get Updates on the Splunk Community!

Splunk Answers Content Calendar, July Edition I

Hello Community! Welcome to another month of Community Content Calendar series! For the month of July, we will ...

Secure Your Future: Mastering Upgrade Readiness for Splunk 10

Spotlight: The Splunk Health Assistant Add-On  The Splunk Health Assistant Add-On is your ultimate companion ...

Observability Unlocked: Kubernetes & Cloud Monitoring with Splunk IM

Ready to master Kubernetes and cloud monitoring like the pros? Join Splunk’s Growth Engineering team on ...