Adding graphic assets to plugins

[Simone_Scarduzio]

Hello,

I'm writing a plugin, now I want to add an image to the HTML.
What would the path be?

public/templates/myplugin.html

<img src="???/cat.jpg" />

My image is stored under /public/cat.jpg.

[Kikketer (Chris Weed)]

You can designate what folder in your plugin is a "public" or "static" folder. In the definition (index.js) file add something like this:

{
    publicDir: resolve(__dirname, 'public'),
    uiExports: { ...

To access it you will need to use something like /plugins/your-plugin-name/cat.jpg

[Simone_Scarduzio]

Thanks @Kikketer! But where does the resolve function come from? Some import missing?

[Simone_Scarduzio]

OK I got there myself, now I have it compiling:

import { resolve } from 'path'

export default function (kibana) {
  return new kibana.Plugin({
    require: ['elasticsearch'],
    publicDir: resolve(__dirname, 'public'),

So here's the issue though, the asset is linked as:
src="/plugins/your-plugin-name/cat.jpg"

But in development that would need to be:
/xyz/plugins/your-plugin-name/cat.jpg

With that xyz being those three letters that change in the Kibana URL every time I restart the server (npm start).

Now, somewhere else in the Javascript I could use the function chrome.addBasePath('...'), but now I'm in the static HTML so I can't use it.

Suggestions?

[Kikketer (Chris Weed)]

Sorry was busy, glad you got the resolve bit figured out.

For pure static things you may be able to get by with relative? Since the url will contain your plugin name already, you may be able to get by with simple things like <img src="cat.jpg" />. It's friday, the brain is shutting down for the weekend, but that should work in theory regardless of what other things are going on in the URL.

Hope that helps