topic Add Picture to Dashboard in Dashboards & Visualizations

Add Picture to Dashboard

KhalidHALBA — Sat, 06 Jun 2020 21:21:24 GMT

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 .

Re: Add Picture to Dashboard

lguinn2 — Fri, 16 May 2014 22:01:17 GMT

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.

Re: Add Picture to Dashboard

KhalidHALBA — Sat, 17 May 2014 02:30:53 GMT

Thank you , your answer solves my problem.

Re: Add Picture to Dashboard

splunkn — Wed, 12 Nov 2014 06:28:48 GMT

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?

Re: Add Picture to Dashboard

Ellina — Wed, 16 Sep 2015 06:46:25 GMT

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

Re: Add Picture to Dashboard

brettadams — Thu, 19 May 2016 06:17:41 GMT

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>

Re: Add Picture to Dashboard

lguinn2 — Fri, 20 May 2016 19:35:39 GMT

Thanks - I updated the answer...

Re: Add Picture to Dashboard

yasinmoha — Wed, 31 Aug 2016 14:26:29 GMT

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>

Re: Add Picture to Dashboard

hoanlq — Thu, 01 Dec 2016 04:38:34 GMT

I downvoted this post because not working in verion 6.5.1

Re: Add Picture to Dashboard

lguinn2 — Fri, 02 Dec 2016 19:50:12 GMT

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."

Re: Add Picture to Dashboard

lguinn2 — Fri, 02 Dec 2016 19:55:48 GMT

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.

Re: Add Picture to Dashboard

lguinn2 — Sat, 03 Dec 2016 01:15:44 GMT

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.

Re: Add Picture to Dashboard

rsennett_splunk — Fri, 16 Dec 2016 21:33:31 GMT

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.

Re: Add Picture to Dashboard

arkonner — Thu, 09 Feb 2017 15:34:59 GMT

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

Re: Add Picture to Dashboard

Sahrtex23 — Tue, 23 May 2017 13:01:01 GMT

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

Re: Add Picture to Dashboard

Michael — Thu, 29 Jun 2017 18:08:05 GMT

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.

Re: Add Picture to Dashboard

thambisetty — Wed, 14 Mar 2018 06:45:10 GMT

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">

Re: Add Picture to Dashboard

nkankur — Wed, 14 Mar 2018 12:55:50 GMT

Thanks a lot Iguinn!

Re: Add Picture to Dashboard

manikyasandeepg — Tue, 07 Aug 2018 13:07:11 GMT

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

Re: Add Picture to Dashboard

brhicke747 — Wed, 20 May 2020 21:00:06 GMT

Thank you! This worked for me!