Dashboards & Visualizations

How to embed an image in a simple XML dashboard with HTML?

Communicator

I'm trying to embed a jpeg into a simple XML dashboard with HTML. It looks like this:

<dashboard>
  <label></label>
  <description/>

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

I've obviously excised the page content just to show how I'm trying to include the picture.

The file "picture.jpg" is living in /opt/splunk/etc/apps/myapp/appserver/static

All I'm seeing is a big old broken image link. Any thoughts?

1 Solution

SplunkTrust
SplunkTrust

Change the path to the asset like so:

/static/app/myapp/picture.jpg

View solution in original post

Path Finder

In order to display a static image on a dashboard I created the images directory on the path below -

C:\Program Files\Splunk\etc\apps\search\appserver\static\images\

The dashboard with the embedded images have the following source:

Roberto Test
See if html panels work

<html>
  <h1>HTML Panel Example</h1>
  <p>The HTML panel displays inline HTML.</p>
    <pre><img src="/static/app/search/images/pretty1.jpg"/></pre>
 </html>
</row>
<row>
<html>
  <h1>HTML Panel Example</h1>
  <p>The HTML panel displays inline HTML.</p>
    <pre><img src="/static/app/search/images/pretty2.jpg"/></pre>
 </html>
</row>

Was very useful to install the Dashboard 6.x examples app -

Contributor

Wow. I got it to work, and I don't know why.

In my code, I have:
<img src="/static/app/search/images/zg9ac8.jpg"/>

But, my directory structure is:
/opt/splunk/etc/apps/search/static/images/zg9ac8.jpg

Why does this work? Am I only one that thinks this is weird?

No wonder this has been kicking my butt for so long. I stopped trying to understand it, and went with Arkonner's pathing, then removed all the jpgs I had in multiple directories, until I found that combination above.

So, my new questions is: WTF?

0 Karma

SplunkTrust
SplunkTrust

Change the path to the asset like so:

/static/app/myapp/picture.jpg

View solution in original post

New Member

Hi, this is driving me crazy. I tried the same as above, but with no success.

  1. First I did a upload of a (.jpg and a .png) picture ("Manage Apps_Edit Properties_Upload")
  2. I saw that a Folder was created ("/opt/splunk/etc/apps/nameofmyapp/appserver")
  3. I have only user rights on th server, so i cannot see waht happed under "appserver"
  4. tried example above with tag at dashboard source, with no success
  5. tried different path names of the image with no success
  6. searching around the internet... 😞
  7. Converted Dashboard to HTML -> same problem

Its every time the broken image, but not the picture.

Who has the magic to solve this, or to explain how it will work - I can't find THE documentation...?
thx
sven

0 Karma

New Member

Hi.
We found the following solution:
Uploading Picture to physical path on searchhead:
"/opt/splunk/etc/apps/$myappname$/appserver/static/picture.jpg"

We used the following line in Panel-Source:

img src="https://hostname:8000/en-US/static/app/$myappname$/picture.jpg" alt="picture"

Next Problem is to replace the picture with a new one.
It seens that we need to restart the splunk or webserver deamon.
My way is to delete the picture und creating a new with a new name.

I hope this bad things will be fixed in later versions, because I want to use splunk, not to administrate it.

0 Karma

Explorer

Hi outofheapspace,

Just double check the name of the image. Make sure it is same as it shows on the server.
Even image extension case should be the same.
i.e. if image name is "abc.JPG", then you should mention "/static/app/urapp/abc.JPG" only, not "/static/app/urapp/abc.jpg".
Otherwise it will throw 404 error.
Sometimes we ignore these small things but they will make you go crazy 🙂

0 Karma

Communicator

Wow. None of the info I could find in the documentation suggested that was needed. Thanks!

0 Karma

Path Finder

It works, thanks a lot!!!

0 Karma
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!