Solved: Re: 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?

Accelerating Observability as Code with the Splunk AI Assistant

Integrating Splunk Search API and Quarto to Create Reproducible Investigation ...

Congratulations to the 2025-2026 SplunkTrust!

Join the Conversation

How to place an image in one panel?

Accelerating Observability as Code with the Splunk AI Assistant

Integrating Splunk Search API and Quarto to Create Reproducible Investigation ...

Congratulations to the 2025-2026 SplunkTrust!