Images

Add custom images to dashboards for branding, context, and backgrounds, using external URLs or shared images stored in the KV store.

Add custom images to your dashboard for visual branding, illustrative context, and dashboard backgrounds. You can reference an image by URL or upload images to the key value (KV) store, where the images are accessible to all members of an organization.

Upload an image

Learn how image uploads work in the KV store, including role-based permissions, supported formats, and considerations for app developers.

Note: All uploaded images in the KV store, including those in private dashboards, are accessible to all members of an organization.

When you upload an image, it is stored in the KV store. Because of this, only Enterprise admins, Cloud sc_admins, and power users can upload or delete images. If you don't have the correct role assigned to upload images, you can ask someone with the correct role to add it for you. An admin can also specify which user roles can access the following kv-store collections to grant access to more users or to fewer users:

  • splunk-dashboard-icons (for icons)

  • splunk-dashboard-images (for images)

The following formats are supported for uploading an image:

  • .png
  • .jpeg
  • .gif
  • .webp

Uploading an image is not recommended for app developers as images in the kv-store are not packaged with apps.

Reference an image by URL

Learn how to add images to dashboards using relative, Base64-encoded, or external URLs, including recommendations and export considerations.

Users with any permission set or role can add an image to their dashboard by referencing a URL.

Relative image URL

You can add an image to a dashboard using a relative image URL if the image is already added to an app uploaded to the environment. PNG and PDF exports include images referenced by a relative URL. To use a relative URL, you must know the exact directory path of your image and use that path to build the relative URL.

Adding an image using a relative image URL is the recommended method for app developers as the image is contained within the app and does not require additional action from the end user.

The following is an example of the steps you might take when using a relative image URL.

  1. Upload your image. Your file path on disk might look like the following:

    $SPLUNK_HOME/etc/apps/<myapp>/appserver/static/images/<myfile.png>

  2. Select the Add Image button ( The Add Image button in the editing toolbar. ) in the editing toolbar.
  3. Add the image's relative URL to your dashboard. The relative URL is the file path on the server. Your relative URL might look like the following:

    /static/app/<myapp>/images/<myfile.png>

The following shows examples of relative image URLs:

CODE 
/static/app/splunk-dashboard-studio/images/examples-hub/datacenter/Background_v2.png

/static/app/splunk-dashboard-studio/images/examples-hub/images/splunk_logo.png

Base64 encoding

You can upload your image to an online image Base64 encoder, then paste the returned Base64-encoded string as the image URL on your dashboard.

Adding many images to a dashboard using Base64 encoding increases the dashboard definition size. Adding an image using Base64 encoding is not recommended for app developers due to the potential definition size increase.

The following shows a truncated example of a Base64-encoded string:
CODE 
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFAEAAA..

External image URL

When adding an image in a dashboard by referencing an external URL, you must ensure to add the URL to the trusted domains list. See Add an external URL to the Dashboards Trusted Domains List.

Adding an image using an external URL is not recommended for app developers as an end user will also need to add each domain used to their trusted domains list.

PNG and PDF exports cannot download images referenced by an external URL. To ensure these images render in a PNG or PDF export, save them to a local directory and upload them to your dashboard, if you have the correct permissions. The following is an example of an external URL.

CODE 
https://www.buttercup-games.com/image.png

Add an external URL to the Dashboards Trusted Domains List

Add external image URL domains to the Dashboards Trusted Domains List so that authorized images render properly while blocking images from unauthorized domains.

The Dashboards Trusted Domains List is a list of authorized URL domains that aids the management of external images. Images linked from a domain that is not specified in the list do not render in the dashboard. To permit an external image, you can add the image's URL domain to the list.

See Configure Dashboards Trusted Domains List.

Add an image to your dashboard

Add images to dashboards using the Add Image button, then upload, drag and drop, or link to image files within the size limit.

  1. Select the Add Image button ( The Add Image button in the editing toolbar. ) in the editing toolbar.
  2. Add an image using one of the following methods:
    • Enter a URL for your image in the Enter URL field.
    • Drag and drop a local image.
    • Select upload file... and navigate to your image.
Note: Images might take a while to render. The current size limit to upload an image to the KV store is 16MB.

Configuration Panel options for images

Configure image position, size, and interaction behavior in the dashboard Configuration panel for precise layout and interactive navigation.

Visibility

Position and size

In absolute layout, you can use your mouse to change the size of the panel, or the Position and size section of the Configuration panel for pixel perfect sizing and placement.

Image content

Reference an image by URL or upload an image file. See Reference an image by URL and Add an image to your dashboard.

Color and style

For corner radius options, see Round visualization corners.

Interactions

Select + Add interaction to set up different visualization interactions such as linking to a custom URL, setting tokens, or linking to a report. For more details, see Add dashboard interactions.

Source code

Select your visualization or its search to view and edit the source code in real-time. You can also change the Visualization ID to a more readable ID to help identify this visualization in the source code.

Source options for images

Configure image source URLs and aspect ratio behavior when editing images in the source editor.

The following options are available for editing images in the source editor:

Property Type Default Description
src string n/a URL of an image file. The editor accepts all browser-supported image formats.
preserveAspectRatio boolean false Set to true to maintain the aspect ratio of an image when the screen is resized.
title string n/a Specify the title used as alternative text for the image. This text is read by screen readers and displays when the image cannot be shown.