Solved: How to place an image in one panel?

patra966 · ‎04-22-2020

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

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

Thanks in advance.

manjunathmeti · ‎04-22-2020

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 · ‎04-22-2020

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 · ‎04-23-2020

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.

How to place an image in one panel?

Devesh Logendran, Splunk, and the Singapore Cyber Conquest

There's No Place Like Chrome and the Splunk Platform

Customer Experience | Join the Customer Advisory Board!