Load image with Markdown in Dashboard

Elastic Stack Kibana
1

I want to display image to my dashboard. I put this image to /usr/share/kibana/src/ui/public/image/image.png

In Markdown, i insert this ![image ] (file//usr/share/kibana/src/ui/public/image/image.png 'My image').
But is not work for me. Please can you help me, to display this image with Markdown.
I use kibana 6.4

Thank you!

2

file//usr/share/kibana/src/ui/public/image/image.png

Unless you can open that file like that from your browser (and I would be really surprised if you could), it's not going to work. The path you put in there needs to load on its own for it to work right.

src/ui/public isn't really the right place to drop files, that's where plugin code goes, and static files are not served from that path. In fact, I don't think there's any path that Kibana will serve static assets from. You'll need some other way to host that image, either something internally (maybe via nginx), or via some image hosting service.

UPDATE: I think I was wrong about the static serving from Kibana... looking into things, give me a little time.

UPDATE 2: Ok, so there actually are 2 paths that static assets are served from, as you can see here. You could drop your image into ui/public/assets/fonts or ui/public/assets/favicons and then load your image from there. It's weird to be dropping images in either one, but it would work, and you could load it via /ui/fonts/image.png or /ui/favicons/image.png.

You could also modify the source to add a new path that you want to drop images into.

But keep in mind, if you do either of these, you'll lose that change, and the images, when you upgrade Kibana in the future.

The better option, assuming you don't want to serve the image from some other service, would be to expose it via a Kibana plugin. That way you could easily upgrade Kibana and just re-install that plugin instead of modifying all the Kibana source again. The plugin would just need to use the same server.exposeStaticDir method to expose a path inside the plugin. Bundle the image into your plugin, install it into Kibana, and now you can have the image hosted inside of Kibana. If you don't want to bundle the image, you could just have it serve assets from another path too, but that's a little more prone to breaking (if you change servers, for example).

3

Hello joe,

Thank you for you reply. I try this, but is not work.

![ Code Error](file:///usr/share/kibana/src/ui/public/assets/favicons/image.png "Code Error")

what the correct synthax ?
Is there another plugin that can be used instead of Markdown ?

4

file:///usr/share/kibana/src/ui/public/assets/favicons/image.png

I don't think that's what you want, since file: will point to your local machine, not the file on the server. Kibana should be hosting it, so you should be able to access it from <your kibana hostname and port>/ui/favicons/image.png, and then the correct why to use that in markdown would be:

![Code Error](<your kibana hostname and port>/ui/favicons/image.png)

<your kibana hostname and port> there would be http://localhost:5601 or https://internal.tld or whatever you use to connect to Kibana.

1 Like
5

Thank you Joe, is work for me

/usr/share/kibana/src/ui/public/assets/favicons/image.png

in markdown
![Image]( <your kibana ip>:5601/ui/favicons/image.png)

6

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.