# What is the location for a local image file to be used in a dashboard Markdown widget?

**URL:** <https://discuss.elastic.co/t/what-is-the-location-for-a-local-image-file-to-be-used-in-a-dashboard-markdown-widget/181043>\
**Category:** Kibana\
**Created:** [May 14, 2019, 4:43pm UTC](https://discuss.elastic.co/t/what-is-the-location-for-a-local-image-file-to-be-used-in-a-dashboard-markdown-widget/181043 "2019-05-14T16:43:56Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jmcclure](https://avatars.discourse-cdn.com/v4/letter/j/9fc29f/32.png) [@jmcclure](https://discuss.elastic.co/u/jmcclure)\
**Post date:** [May 14, 2019, 4:43pm UTC](https://discuss.elastic.co/t/what-is-the-location-for-a-local-image-file-to-be-used-in-a-dashboard-markdown-widget/181043/1 "2019-05-14T16:43:56Z")

</div>

- ES stack 6.7.1
- CentOS 7.6

I have an image file (PNG) that I want to display at the top of a dashboard. The image cannot be obtained by a URL, but, rather needs to be local in the Kibana deployment. I am using a Markdown widget with the following markup:

// ![DataIntegrity](/bundles/data\_integrity.png)

This works fine if the Kibana optimization runs prior to the image file being copied into the optimize/bundles directory. If there is any change in configuration that triggers the optimization cycle when Kibana is restarted, the custom image file is lost from the optimize/bundle directory and thus I have a broken link for the widget.

Is there a specific location within the Kibana deployment where I can place this image file to survive an optimization cycle using this strategy?

Using this suggestion ( [Has anyone modified Kibana code to display images or documents?](https://discuss.elastic.co/t/has-anyone-modified-kibana-code-to-display-images-or-documents/59221/2) ) I did try placing a copy in the src/ui/public/images/ directory, however, this did not work even after forcing a re-optimize cycle.

Thanks,  
James

---

<div class="post-metadata">

**Author:** ![tylersmalley](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tylersmalley/32/8833_2.png) [@tylersmalley](https://discuss.elastic.co/u/tylersmalley)\
**Post date:** [May 14, 2019, 5:09pm UTC](https://discuss.elastic.co/t/what-is-the-location-for-a-local-image-file-to-be-used-in-a-dashboard-markdown-widget/181043/2 "2019-05-14T17:09:20Z")

</div>

You really shouldn't be manually copying things into the optimize directory. You could create a custom plugin to serve this image.

---

<div class="post-metadata">

**Author:** ![jmcclure](https://avatars.discourse-cdn.com/v4/letter/j/9fc29f/32.png) [@jmcclure](https://discuss.elastic.co/u/jmcclure)\
**Post date:** [May 14, 2019, 7:03pm UTC](https://discuss.elastic.co/t/what-is-the-location-for-a-local-image-file-to-be-used-in-a-dashboard-markdown-widget/181043/3 "2019-05-14T19:03:32Z")

</div>

Tyler,

Would the plugin be simply an index.js and a public directory storing the image file?

James

---

<div class="post-metadata">

**Author:** ![tylersmalley](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tylersmalley/32/8833_2.png) [@tylersmalley](https://discuss.elastic.co/u/tylersmalley)\
**Post date:** [May 14, 2019, 7:08pm UTC](https://discuss.elastic.co/t/what-is-the-location-for-a-local-image-file-to-be-used-in-a-dashboard-markdown-widget/181043/4 "2019-05-14T19:08:30Z")

</div>

If you checkout the Kibana repository there is a plugin generator you can use to get you started. You will want to checkout the branch (6.7) that corresponds to the version you are using:

> <https://github.com/elastic/kibana/blob/master/packages/kbn-plugin-generator/README.md>

---

<div class="post-metadata">

**Author:** ![tylersmalley](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tylersmalley/32/8833_2.png) [@tylersmalley](https://discuss.elastic.co/u/tylersmalley)\
**Post date:** [May 14, 2019, 7:31pm UTC](https://discuss.elastic.co/t/what-is-the-location-for-a-local-image-file-to-be-used-in-a-dashboard-markdown-widget/181043/5 "2019-05-14T19:31:16Z")

</div>

Looking a little deeper to see if I can provide a better example.

---

<div class="post-metadata">

**Author:** ![tylersmalley](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tylersmalley/32/8833_2.png) [@tylersmalley](https://discuss.elastic.co/u/tylersmalley)\
**Post date:** [May 14, 2019, 8:22pm UTC](https://discuss.elastic.co/t/what-is-the-location-for-a-local-image-file-to-be-used-in-a-dashboard-markdown-widget/181043/6 "2019-05-14T20:22:17Z")

</div>

Ok, here is how this could be accomplished with a plugin:

1. Checkout the Kibana 6.7 branch, since we're building a plugin for 6.7.1. More information on running Kibana locally for development can be found [here](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md)
2. Use the plugin generator to create a plugin `node scripts/generate_plugin.js static_assets`. More information on the plugin generator can be found [here](https://github.com/elastic/kibana/blob/master/packages/kbn-plugin-generator/README.md). Say no to all options, as we won't need them for this example.

```auto
node scripts/generate_plugin.js static_assets
? Provide a short description Static Assets
? What Kibana version are you targeting? 6.7.1
? Should an app component be generated? No
? Should translation files be generated? No
? Should a hack component be generated? No
? Should a server API be generated? No
Initialized empty Git repository in /mnt/c/elastic/kibana-extra/static_assets/.git/
yarn run v1.15.2
$ node scripts/kbn bootstrap
Running [bootstrap] command from [/mnt/c/elastic/kibana]:

Found [28] projects:
...

```

1. Open the plugin in an editor `../kibana-extra/static_assets`
2. Add the following line to the plugin definition in `index.js`: `publicDir: resolve(__dirname, 'public'),`

Should look something like this:

```auto
export default function (kibana) {
  return new kibana.Plugin({
    name: 'static_assets',
    publicDir: resolve(__dirname, 'public'),

    config(Joi) {
      return Joi.object({
        enabled: Joi.boolean().default(true),
      }).default();
    },
  });
}

```

1. Create the `public` directory, and copy your image into it.
2. Running `yarn build` should build the plugin located at `build/static_assets-0.0.0.zip`
3. If you would like to test the plugin locally, you can run `yarn start --no-base-path` and `yarn es snapshot` in another terminal.
4. Image should be available at: [http://localhost:5601/plugins/static\_assets/data\_integrity.jpg](http://localhost:5601/plugins/static_assets/data_integrity.jpg)

I also uploaded my plugin: [https://drive.google.com/open?id=17JyiHaOxsO3OsT-kenqpTAvKJfVjNVC-](https://drive.google.com/open?id=17JyiHaOxsO3OsT-kenqpTAvKJfVjNVC-)

---

<div class="post-metadata">

**Author:** ![jmcclure](https://avatars.discourse-cdn.com/v4/letter/j/9fc29f/32.png) [@jmcclure](https://discuss.elastic.co/u/jmcclure)\
**Post date:** [May 14, 2019, 11:43pm UTC](https://discuss.elastic.co/t/what-is-the-location-for-a-local-image-file-to-be-used-in-a-dashboard-markdown-widget/181043/7 "2019-05-14T23:43:27Z")

</div>

Awesome! I really appreciate your help Tyler. Followed your example creating the plugin. Installed the new plugin and works like a charm.

Thanks again,  
James

---

<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:** [June 11, 2019, 11:43pm UTC](https://discuss.elastic.co/t/what-is-the-location-for-a-local-image-file-to-be-used-in-a-dashboard-markdown-widget/181043/8 "2019-06-11T23:43:31Z")

</div>

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