Images (PNG, JPG, GIF)


Images such as PNGs, JPGs, or GIFs can be imported and used inside of windows in Ignition.

Video recorded using: Ignition 8.1


(open in window)

[00:00] While it is recommended that you use SVGs as they will scale better, you may find yourself in a situation where you don't have an SVG file for the image you'd like to add to your project in this lesson. I'll demonstrate how to add a PNG, JPEG or GIF to a Vision window. I'm currently looking at a Vision window in my designer in order to add an image. The first thing I'll do is add an image component. I'll drag and drop from the component palette straight to my window here. Underneath the data properties for this component. There's an Image Path property. You can click the folder search icon to open up the image management tool and find your image to automatically fill in the image path. I have the option to choose from some built-in icons in this folder here, or I can upload one of my own images. I have an image saved as a PNG on my local machine that I'd like to upload. So I'll click the upload button select my image and click open. Now my image appears in the image management tool and I can double click it to add its path to my image component.

[01:05] This same process can be done for PNGs JPEGs or GIFs.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.