Dashboards & Visualizations

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

willial
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

joshd
Builder

Change the path to the asset like so:

/static/app/myapp/picture.jpg

View solution in original post

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

Michael
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

joshd
Builder

Change the path to the asset like so:

/static/app/myapp/picture.jpg

outofheapspace
Explorer

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

outofheapspace
Explorer

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.

chahal3108
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

willial
Communicator

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

0 Karma

Lindaiyu
Path Finder

It works, thanks a lot!!!

0 Karma
Get Updates on the Splunk Community!

Routing logs with Splunk OTel Collector for Kubernetes

The Splunk Distribution of the OpenTelemetry (OTel) Collector is a product that provides a way to ingest ...

Welcome to the Splunk Community!

(view in My Videos) We're so glad you're here! The Splunk Community is place to connect, learn, give back, and ...

Tech Talk | Elevating Digital Service Excellence: The Synergy of Splunk RUM & APM

Elevating Digital Service Excellence: The Synergy of Real User Monitoring and Application Performance ...