# Adding graphic assets to plugins

**URL:** <https://discuss.elastic.co/t/adding-graphic-assets-to-plugins/81501>\
**Category:** Kibana\
**Created:** [April 6, 2017, 4:20pm UTC](https://discuss.elastic.co/t/adding-graphic-assets-to-plugins/81501 "2017-04-06T16:20:52Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Simone\_Scarduzio](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/simone_scarduzio/32/17128_2.png) [@Simone\_Scarduzio](https://discuss.elastic.co/u/Simone_Scarduzio)\
**Post date:** [April 6, 2017, 4:20pm UTC](https://discuss.elastic.co/t/adding-graphic-assets-to-plugins/81501/1 "2017-04-06T16:20:52Z")

</div>

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

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

```

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

---

<div class="post-metadata">

**Author:** ![Kikketer](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kikketer/32/13813_2.png) [@Kikketer](https://discuss.elastic.co/u/Kikketer)\
**Post date:** [April 6, 2017, 6:07pm UTC](https://discuss.elastic.co/t/adding-graphic-assets-to-plugins/81501/2 "2017-04-06T18:07:27Z")

</div>

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

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

```

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

---

<div class="post-metadata">

**Author:** ![Simone\_Scarduzio](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/simone_scarduzio/32/17128_2.png) [@Simone\_Scarduzio](https://discuss.elastic.co/u/Simone_Scarduzio)\
**Post date:** [April 7, 2017, 3:08pm UTC](https://discuss.elastic.co/t/adding-graphic-assets-to-plugins/81501/3 "2017-04-07T15:08:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Simone\_Scarduzio](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/simone_scarduzio/32/17128_2.png) [@Simone\_Scarduzio](https://discuss.elastic.co/u/Simone_Scarduzio)\
**Post date:** [April 7, 2017, 3:19pm UTC](https://discuss.elastic.co/t/adding-graphic-assets-to-plugins/81501/4 "2017-04-07T15:19:05Z")

</div>

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

```auto
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?

---

<div class="post-metadata">

**Author:** ![Kikketer](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kikketer/32/13813_2.png) [@Kikketer](https://discuss.elastic.co/u/Kikketer)\
**Post date:** [April 7, 2017, 5:44pm UTC](https://discuss.elastic.co/t/adding-graphic-assets-to-plugins/81501/5 "2017-04-07T17:44:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [May 5, 2017, 5:45pm UTC](https://discuss.elastic.co/t/adding-graphic-assets-to-plugins/81501/6 "2017-05-05T17:45:34Z")

</div>

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