Dashboards & Visualizations

Add Picture to Dashboard

KhalidHALBA
Explorer

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 .

Labels (1)
Tags (3)
1 Solution

lguinn2
Legend

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
Contributor

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
Communicator

Thanks this worked like a charm!

0 Karma

brhicke747
Explorer

Thank you! This worked for me!

0 Karma

Sahrtex23
Engager

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




0 Karma

manikyasandeepg
Explorer

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

0 Karma

arkonner
Path Finder

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

0 Karma

lguinn2
Legend

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
Legend

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.

0 Karma

thambisetty
SplunkTrust
SplunkTrust

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.
0 Karma

rsennett_splunk
Splunk Employee
Splunk Employee

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
Explorer

Thank you , your answer solves my problem.

lguinn2
Legend

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
Path Finder

Thanks a lot Iguinn!

0 Karma

hoanlq
Engager

I downvoted this post because not working in verion 6.5.1

0 Karma

lguinn2
Legend

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
Engager

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
Path Finder

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>
0 Karma

lguinn2
Legend

Thanks - I updated the answer...

0 Karma

splunkn
Communicator

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?

0 Karma

Ellina
Engager

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

0 Karma
Get Updates on the Splunk Community!

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...