diff --git a/explore-analyze/find-and-organize/data-views.md b/explore-analyze/find-and-organize/data-views.md index 4704118f3..72f264749 100644 --- a/explore-analyze/find-and-organize/data-views.md +++ b/explore-analyze/find-and-organize/data-views.md @@ -518,6 +518,18 @@ The `{{value}}` template string URL-encodes the contents of the field. When a fi When the formatter type is **Image**, the `{{value}}` template string specifies the name of an image at the specified URI. +You can render base64 images from data within a document by using the following **URL Template**: + +```text +data:image/png;base64,{{value}} +``` + +For example: +![Data view editing to load base64 encoded PNG data](/explore-analyze/images/kibana-data_view_format_url_image_base64.png "") + +The above configuration will render a PNG file in discover to appear like this: +![Sample output of PNG loading in Discover](/explore-analyze/images/kibana-discover-render_base64_image.png "") + When the formatter type is **Audio**, the `{{value}}` template string specifies the name of an audio file at the specified URI. To pass unescaped values directly to the URL, use the `{{rawValue}}` string. diff --git a/explore-analyze/images/kibana-data_view_format_url_image_base64.png b/explore-analyze/images/kibana-data_view_format_url_image_base64.png new file mode 100644 index 000000000..7d7feba68 Binary files /dev/null and b/explore-analyze/images/kibana-data_view_format_url_image_base64.png differ diff --git a/explore-analyze/images/kibana-discover-render_base64_image.png b/explore-analyze/images/kibana-discover-render_base64_image.png new file mode 100644 index 000000000..b788de374 Binary files /dev/null and b/explore-analyze/images/kibana-discover-render_base64_image.png differ