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?

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.

Index This | What travels the world but is also stuck in place?

Discover New Use Cases: Unlock Greater Value from Your Existing Splunk Data

Continue Your Journey: Join Session 2 of the Data Management and Federation Bootcamp ...

Join the Conversation