topic Re: How to embed an image in a simple XML dashboard with HTML? in Dashboards & Visualizations

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

willial — Mon, 26 Jan 2015 15:47:39 GMT

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?

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

joshd — Mon, 26 Jan 2015 16:19:45 GMT

Change the path to the asset like so:

/static/app/myapp/picture.jpg

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

willial — Mon, 26 Jan 2015 16:22:41 GMT

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

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

outofheapspace — Tue, 29 Sep 2020 06:55:01 GMT

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

First I did a upload of a (.jpg and a .png) picture ("Manage Apps_Edit Properties_Upload")
I saw that a Folder was created ("/opt/splunk/etc/apps/nameofmyapp/appserver")
I have only user rights on th server, so i cannot see waht happed under "appserver"
tried example above with tag at dashboard source, with no success
tried different path names of the image with no success
searching around the internet... 😞
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

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

chahal3108 — Wed, 14 Oct 2015 10:11:52 GMT

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 🙂

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

outofheapspace — Wed, 21 Oct 2015 13:41:59 GMT

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.

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

Lindaiyu — Thu, 03 Mar 2016 16:55:00 GMT

It works, thanks a lot!!!

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

arkonner — Wed, 11 Jan 2017 19:25:44 GMT

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 -

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

Michael — Thu, 29 Jun 2017 17:48:24 GMT

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?