Solved: Add Picture to Dashboard

KhalidHALBA · ‎05-16-2014

Hello everyone, I have a problem with dashboards and I hope that someone could help.

I want to add a picture to my dashboard that I have created based on the search app , how can I do that ?

These are the steps that I have tried :

I have created and copied an HTML file + picture in this directory C:\Program Files\Splunk\etc\apps\search\appserver\static

This is the syntax I have used:

</head>
<body>
<img src="picture.jpg"/>
</body>
</html>

And I have created a View tag :

<view>
  <module name="ServerSideInclude">
    <param name="src">hello.html</param>
  </module>
</view>

but I do not know where to insert this view tag, I have tried to insert it by editing the XML in the dashboard but I couldn't do this.

I tried to convert the XML to HTML and Add the picture to it but it didn't work .

lguinn2 · ‎05-16-2014

The html needs to live in a dashboard, one way or another. For a dashboard, you can write Simple XML or Advanced XML or you can use HTML. The <view> tag defines a dashboard in Advanced XML.

However, I would write this simple XML for a dashboard instead:

<dashboard>
<row>
  <html>
    <h1>HTML Panel Example</h1>
    <p>The HTML panel displays inline HTML.</p>
      <img src="picture.jpg"/>
   </html>
  </row>
</dashboard>

Now you don't need hello.html at all.

For more info check out the Build Dashboards with Simple XML section of the manual - or start at the beginning of the manual.

View solution in original post

Michael · ‎06-29-2017

rsennett is onto it, but here's a simplified version:

The path you put in the code, has nothing to do with reality. Just accept it and go with this in your XML code:

<img src="/static/app/search/images/picture.jpg"/>

And put the image here:

/opt/splunk/etc/apps/search/static/images/picture.jpg

Why this works, I don't know, nor do I care anymore.
...that's another two hours of my life I'll never get back, thanks to incomplete, wrong, and convoluted Splunk Community "answers". Hopefully this will save someone else the trouble.

becksyboy · ‎02-26-2021

Thanks this worked like a charm!

brhicke747 · ‎05-20-2020

Thank you! This worked for me!

Sahrtex23 · ‎05-23-2017

Here is another example that I hope helps someone else out. I was wrestling with this for a little while because my images were appearing broken on my dashboard after editing the source XML.

Authentication Dashboard

manikyasandeepg · ‎08-07-2018

Did you figure out the solution? even i am facing the same

arkonner · ‎02-09-2017

Should be possible to use a network link for the image?

lguinn2 · ‎12-02-2016

New answer for 6.5
It is now necessary to place your images in the following directory:

$SPLUNK_HOME/etc/apps/YOURAPP/appserver/static/images

and refer to it in your HTML like this:

<dashboard>
  <label>Lisa Test</label>
  <description>See if html panels work</description>
 <row>
   <html>
     <h1>HTML Panel Example</h1>
     <p>The HTML panel displays inline HTML.</p>
       <pre><img src="/static/app/YOURAPP/yourimage.png"/></pre>
    </html>
   </row>
 </dashboard>

If you are having problems, test that your image is accessible this way:

http://yourserver:8000/en-US/static/app/YOURAPP/images/yourimage.png

Note that this is case-sensitive (as was mentioned in another comment). If your file is myimage.JPG, then you must use JPG and not jpg in the html.

So the problem with the earlier answer is that the images subdirectory is now required. I believe that you had more flexibility in where to locate the images in earlier versions of Splunk.

lguinn2 · ‎12-02-2016

Oops - maybe the images subdirectory isn't required. My colleague was able to use the appserver/static directory without the images subdirectory.

But at any rate, test to see if the image is accessible.

thambisetty · ‎03-13-2018

Hi,

if you are placing your image in $SPLUNK_HOME/etc/apps/test/appserver/static/image.png
then html tag would be

<img src="/static/app/test/image.png">

if you are placing your image in $SPLUNK_HOME/etc/apps/test/appserver/static/images/image.png
then html tag would be

 <img src="/static/app/test/images/image.png">

————————————
If this helps, give a like below.

rsennett_splunk · ‎12-16-2016

Two more cents for those reading this path through the versions. If you use a developer tool view (avail in every browser) you'll see that Splunk is looking for the path within the structure of SPlunk. (hidden in the Framework is a relative path) so the /opt/splunk/pictures... is never going to work because /opt is meant to mean "relative to the server" and everything in Splunk is relative to $SPLUNK_HOME and on top of that we've got our own Splunkie path structure (note Lisa has "app" not "apps" so it' isn't the file path) which you must follow. you can add or not add further subdirectories. The best resource to understand how this stuff works is by picking apart the Dashboard Examples App... which you should download with each version (because it will get upgraded on splunkbase and is meant to be used with the most current version) https://splunkbase.splunk.com/app/1603/

If you were going to offer pictures to your users to put in their dashboards you would want to create a new app and put the pictures there. Adding directories to the $SPLUNK_HOME directory is just a bad idea.

With Splunk... the answer is always "YES!". It just might require more regex than you're prepared for!

KhalidHALBA · ‎05-16-2014

Thank you , your answer solves my problem.

lguinn2 · ‎05-16-2014

The html needs to live in a dashboard, one way or another. For a dashboard, you can write Simple XML or Advanced XML or you can use HTML. The <view> tag defines a dashboard in Advanced XML.

However, I would write this simple XML for a dashboard instead:

<dashboard>
<row>
  <html>
    <h1>HTML Panel Example</h1>
    <p>The HTML panel displays inline HTML.</p>
      <img src="picture.jpg"/>
   </html>
  </row>
</dashboard>

Now you don't need hello.html at all.

For more info check out the Build Dashboards with Simple XML section of the manual - or start at the beginning of the manual.

nkankur · ‎03-14-2018

Thanks a lot Iguinn!

hoanlq · ‎11-30-2016

I downvoted this post because not working in verion 6.5.1

lguinn2 · ‎12-02-2016

Hi @hoaniq - I certainly have enough karma to sustain a few downvotes. But since you are new to the forum, here is a pointer to our discussion on
https://answers.splunk.com/answers/244111/proper-etiquette-and-timing-for-voting-here-on-ans.html

And although it is true that my answer does not work in 6.5.1, you are going to be very very busy if you intend to downvote every answer since 2014 that is no longer valid.

But thank you for pointing out that this answer no longer works. It would be even better if you submitted a comment that requested an updated answer - best would be if you submitted updated information about "what no longer works."

brettadams · ‎05-18-2016

There is a minor error in the above example. Its missing the < / html > at the end. The following worked for me no problem.

<dashboard>
 <row>
   <html>
     <img src="picture.jpg"/>
   </html>
 </row>
</dashboard>

yasinmoha · ‎08-31-2016

Hi...

I am using splunk 6.4.3 I used the code as below but the image is not loading.

<row>
   <html>
     <img src="/opt/splunk/Pictures/logo.png"/>
    </html>
   </row>

lguinn2 · ‎05-20-2016

Thanks - I updated the answer...

splunkn · ‎11-11-2014

I have done the xml like above but I dint get the results.
Could you please help me out?
Im having my picture in /opt/splunk/etc/apps/appserver/static/mylogo.png
Then I have mentioned this path in src="..". But no luck
Is there any size constraints?

Ellina · ‎09-15-2015

I too have the same problem. The image is not getting loaded. How do I solve that?

Add Picture to Dashboard

simple XML

New This Month in Splunk Observability Cloud - Metrics Usage Analytics, Enhanced K8s ...

Alerting Best Practices: How to Create Good Detectors

Discover Powerful New Features in Splunk Cloud Platform: Enhanced Analytics, ...