Skip to main content
Version: 7.9

Images in Vision

Inductive University

Images (png, jpg, gif)

Watch the video

Image Manager

Images such as PNGs, JPGs, or GIFs can be uploaded to the Image Management tool and used inside of windows in Ignition. Once uploaded, these images may be used on windows and in templates. The Image Manager tool, available from the Tools > Image Management, provides an interface to upload, download, or select images.

Bitmap file types are not supported

The Image Manager process does not support bitmap files.

image management in tools menubar

Exporting and Importing Projects

Uploading an image involves storing the file in the Gateway's internal database. This means that project exports do not contain any referenced images.

When exporting a project for use in another Gateway, it is recommended to also export any images that the project uses, and upload them into the new Gateway at the same directory. Examples of uploading and downloading images can be found on this page.

Using Images in the Designer

Uploading an Image to the Image Management Tool

There are two ways to upload an image into the Image Management tool. Both ways involve having the Image Management tool open. At the top of the Designer in the Menu Bar, select Tools > Image Management.

using images in the designer image management tool

Upload on Drag and Drop

Images can simply be dragged and dropped from the local file system into the Image Management window.

Manual Upload

Alternatively, the Image Management window has an Upload button to pass images in. Locate the directory you wish to upload the image. You may use the root folder, or create a new folder to keep your images organized. When ready, click on the Upload Image button.

Image Management Manual Upload

An Open dialog window will appear. Simply find your image on the local system and click Open to upload the selected image.

Using the Image Component on a Window

  1. Drag an Image component from the component palette onto the window.

  2. From the Property Editor, select the image component's Image Path property, click on the Browse icon.

    Using the Image Component on a Window Step 2

  3. From the Image Browser, look through the different folders for an image file you want and double-click on it to display it in your window.

    Using the Image Component on a Window Step 3

  4. The path to the image is now displayed in the components Image Path property.

    Using the Image Component on a Window Step 4

Using Local Images

Instead of using images in the Image Management Tool in Image Path properties of components, you can use the file path to a local image. This is done by prefixing the file path with file:///. An example Image Path would look like this:

file:///C:/Users/Public/Pictures/Sample Pictures/Chrysanthemum.jpg

It is important to understand that this will only work if the image is accessible from where the client is running. So if you access an image from the designer on the local machine, clients that launch elsewhere may not have the image stored in the same location.

Downloading Images from the Image Management Tool

Single images, as well as entire directories, may be downloaded from the Image Management tool. This is useful when migrating a project to another Gateway.

Image downloads can be taken from either the Image Management or Image Browser windows. If at least one folder or image is selected, the Save button (save button icon) will become enabled. Click the Save button, pick a local directory to save the images to, and click the Save button again. Note that all images and subfolders in the selected folder will be copied to the selected directory.