# \[Question\] \[FEATURE-13209\] Image management in perspective

**URL:** <https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596>\
**Category:** Ignition Early Access\
**Tags:** ignition80, perspective\
**Created:** [November 6, 2018, 9:59pm UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596 "2018-11-06T21:59:10Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jhottell](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jhottell/32/6472_2.png) [@jhottell](https://forum.inductiveautomation.com/u/jhottell)\
**Post date:** [November 6, 2018, 9:59pm UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596/1 "2018-11-06T21:59:10Z")

</div>

I assume this will be documented later, also so forgive me if this is something that I have just overlooked. Is there a way to upload images and icons or browse to select them in Perspective? I see the "source" in the image component and "path" in the icon component but don't understand how to browse or upload images etc. I tried vision image paths but that didn't work for me.

Thanks.

---

<div class="post-metadata">

**Author:** ![jspecht](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jspecht/32/6465_2.png) [@jspecht](https://forum.inductiveautomation.com/u/jspecht)\
**Post date:** [November 6, 2018, 10:12pm UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596/2 "2018-11-06T22:12:48Z")

</div>

You can upload images in the Designer by going to Tools -\> Image Management

Once you upload the image, you can right click the image in the Image Manager and click “Copy Path”

In the perspective image component’s source prop, enter “/system/images/{path you copied}” (for example: “/system/images/image.png”)

Icon paths are different. Icon paths are formatted like so: {icon library name}/{icon name} (for example: “material/insert\_emoticon”)

The only icon library we have right now is “material” - you can find the icon names for this library here: [https://material.io/tools/icons/](https://material.io/tools/icons/)

---

<div class="post-metadata">

**Author:** ![ryanjmclaughlin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryanjmclaughlin/32/4318_2.png) [@ryanjmclaughlin](https://forum.inductiveautomation.com/u/ryanjmclaughlin)\
**Post date:** [November 7, 2018, 12:57am UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596/3 "2018-11-07T00:57:25Z")

</div>

> [@jspecht](#):
>
> The only icon library we have right now is "material"

😀 ✋ Fontawesome please! We roll our own icon library via WebDev and a shared script to generate the icon path, but built in icon support is awesome.

---

<div class="post-metadata">

**Author:** ![Carl.Gould](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/carl.gould/32/7262_2.png) [@Carl.Gould](https://forum.inductiveautomation.com/u/Carl.Gould)\
**Post date:** [November 7, 2018, 1:10am UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596/4 "2018-11-07T01:10:19Z")

</div>

It’s not obvious, but you can drop your own icon libraries right into perspective’s icons folder `data\modules\com.inductiveautomation.perspective\icons` and they’ll be available for use in perspective. Material just the only library we’re _shipping_ with. Just copy the file format as material, and you should be all set. The filename (minus the .svg) is the icon library name.

We’re happy to ship perspective with any font library that allows it. Doesn’t look like fontawesome is in that category. But if _you_ have a license for it, you can add it to your projects.

---

<div class="post-metadata">

**Author:** ![ryanjmclaughlin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryanjmclaughlin/32/4318_2.png) [@ryanjmclaughlin](https://forum.inductiveautomation.com/u/ryanjmclaughlin)\
**Post date:** [November 7, 2018, 1:22am UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596/5 "2018-11-07T01:22:41Z")

</div>

![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/4/4e4e960a2489f0ff1f0d350b86e07537149cc977.png)

---

<div class="post-metadata">

**Author:** ![Jenko](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@Jenko](https://forum.inductiveautomation.com/u/Jenko)\
**Post date:** [November 7, 2018, 2:19am UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596/6 "2018-11-07T02:19:51Z")

</div>

> In the perspective image component's source prop, enter "/system/images/{path you copied}" (for example: "/system/images/image.png")

Would this image path structure be the same format used in PROPS \> STYLE \> backgroundImage?

---

<div class="post-metadata">

**Author:** ![jspecht](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jspecht/32/6465_2.png) [@jspecht](https://forum.inductiveautomation.com/u/jspecht)\
**Post date:** [November 7, 2018, 4:31pm UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596/7 "2018-11-07T16:31:37Z")

</div>

For props.style.backgroundImage, you have to wrap the image URL with url(’’) like so: url(’/system/images/{path you copied}’)

You’ll notice that this is the same syntax as CSS background-image properties. That is because under the hood, we are mostly using css to realize styles.

Edit: looks like you do not _have to_ wrap the url in url(’’) - still works for me when I set props.style.backgroundImage to /system/images/{path you copied}

---

<div class="post-metadata">

**Author:** ![OscarLucas](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/oscarlucas/32/6417_2.png) [@OscarLucas](https://forum.inductiveautomation.com/u/OscarLucas)\
**Post date:** [February 27, 2019, 12:08pm UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596/8 "2019-02-27T12:08:31Z")

</div>

Whay about use animated icons? ?

> **[Material Design](https://material.io/design/iconography/animated-icons.html#theming)**
>
> Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

---

<div class="post-metadata">

**Author:** ![ASF](https://avatars.discourse-cdn.com/v4/letter/a/c4cdca/32.png) [@ASF](https://forum.inductiveautomation.com/u/ASF)\
**Post date:** [March 27, 2019, 2:16am UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596/9 "2019-03-27T02:16:11Z")

</div>

> [@jspecht](#):
>
> You can upload images in the Designer by going to Tools -\> Image Management

The Image Management window doesn't allow me to upload SVG files, only PNG/JPG/GIF. The tooltip for the image component tells me I can use an SVG file, but if I can't add it to the Image Management window, how can I use it?

edit: just remembered that I can drag and drop an SVG file directly into my view from a windows folder, so that's all good. Still have the question, _should_ I be able to add SVG's to the image management window? Or is drag-and-drop the only method of adding in SVG's?

---

<div class="post-metadata">

**Author:** ![jspecht](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jspecht/32/6465_2.png) [@jspecht](https://forum.inductiveautomation.com/u/jspecht)\
**Post date:** [March 27, 2019, 4:14pm UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596/10 "2019-03-27T16:14:48Z")

</div>

> Still have the question, _should_ I be able to add SVG’s to the image management window?

Yes - there is already a feature ticket for this in our backlog. I'll link it to this thread.

---

<div class="post-metadata">

**Author:** ![chuache\_sanse](https://avatars.discourse-cdn.com/v4/letter/c/94ad74/32.png) [@chuache\_sanse](https://forum.inductiveautomation.com/u/chuache_sanse)\
**Post date:** [May 27, 2019, 2:12pm UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596/11 "2019-05-27T14:12:35Z")

</div>

Regarding the Images and svg files. Is it possible to have a folder in my server with Ignition perspective pointing to it and display the images without dragging them to the perspective folder?

I want to make a folder with some images and display them in Ignition Perspective (This is not a problem). But I also want that every time that I made a small change to that images (for example blueprints displaying in Ignition Perspective), I want that images update automatically to my project in Ignition. Is this possible configuring the path or something like this??

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [May 28, 2019, 2:26pm UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596/12 "2019-05-28T14:26:15Z")

</div>

You can place photos in

```auto
C:\Program Files\Inductive Automation\Ignition\webserver\webapps\main

```

and then reference them as an image source with  
`Image.props.source = '/path_within_main/image_name.extension'`

**Update** : Users here on the forum keep coming back to this post, but this approach is unsupported and could stop working at any time. The fully-supported future-proof approach is to use the WebDev module and supply your images as resources there.

---

<div class="post-metadata">

**Author:** ![awalker](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/awalker/32/6874_2.png) [@awalker](https://forum.inductiveautomation.com/u/awalker)\
**Post date:** [August 16, 2019, 3:31pm UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596/13 "2019-08-16T15:31:23Z")

</div>

We’ve added basic support for SVGs in the image manager. This feature is available in the 8.0.4 nightly build that was uploaded today (8/16)

---

<div class="post-metadata">

**Author:** ![victor1](https://avatars.discourse-cdn.com/v4/letter/v/6de8d8/32.png) [@victor1](https://forum.inductiveautomation.com/u/victor1)\
**Post date:** [October 6, 2019, 4:04pm UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596/14 "2019-10-06T16:04:17Z")

</div>

It worked! Thanks.  
Now i need to show this image (saved in C:\Program Files\Inductive Automation\Ignition\webserver\webapps\main\folder) in vision.  
How can i do this?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [October 9, 2019, 3:09pm UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596/15 "2019-10-09T15:09:29Z")

</div>

If you have an image you need to use in both Vision AND Perspective, then the image should probably be stored through the Designer’s Image Management. Vision and Perspective use different methods to locate supplied files, and while Perspective can look in the internal database or in the `webapps` folder, Vision might only be able to look in the internal database or a relative location on a local machine.

---

<div class="post-metadata">

**Author:** ![victor1](https://avatars.discourse-cdn.com/v4/letter/v/6de8d8/32.png) [@victor1](https://forum.inductiveautomation.com/u/victor1)\
**Post date:** [October 9, 2019, 4:20pm UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596/16 "2019-10-09T16:20:03Z")

</div>

But I need to upload the image file in a persective application then get it from perspective and vision. Can i do that?

Thanks

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [October 11, 2019, 1:21pm UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596/17 "2019-10-11T13:21:51Z")

</div>

You can vote on the feature request for it here  
[https://ideas.inductiveautomation.com/ignition-features-and-ideas/p/css-animated-icons](https://ideas.inductiveautomation.com/ignition-features-and-ideas/p/css-animated-icons)

---

<div class="post-metadata">

**Author:** ![jbartsch](https://avatars.discourse-cdn.com/v4/letter/j/a183cd/32.png) [@jbartsch](https://forum.inductiveautomation.com/u/jbartsch)\
**Post date:** [August 6, 2020, 12:33pm UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596/18 "2020-08-06T12:33:06Z")

</div>

Carl, I was hoping you could expand on how you can add Fontawesome icons to projects, can these be perspective projects? If so, how would I enter my Fontawesome Kit Code script?

---

<div class="post-metadata">

**Author:** ![Andy\_Guias](https://avatars.discourse-cdn.com/v4/letter/a/b3f665/32.png) [@Andy\_Guias](https://forum.inductiveautomation.com/u/Andy_Guias)\
**Post date:** [October 19, 2022, 10:17am UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596/20 "2022-10-19T10:17:17Z")

</div>

Thank you for this this elegant solution, it works great!  
Once I bind these images to the Image Component's source I can't seem to delete the files using os.remove() even though the image is not displayed anymore. Is there a step that I am missing?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 19, 2022, 10:27am UTC](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596/21 "2022-10-19T10:27:43Z")

</div>

Java keeps the file locked, while the gateway is running.  
I made something that should unlock and delete it (for windows):

> [@Unblock and Delete files that have been locked by Java](https://forum.inductiveautomation.com/t/unblock-and-delete-files-that-have-been-locked-by-java/60194):
>
> There is an issue with java locking files that are in use. Mainly when using the webserver. Causing it to be impossible to delete them while the gateway is running. But here is a solution! (For windows atleast). Using handle you can find and unlock files. I made it a bit easier to use by writing a simple bat file. [UnlockAndDelete.zip](https://forum.inductiveautomation.com/uploads/short-url/7eEcAE6JGpz4JvjlyqUCP4CCD1X.zip) (891.3 KB) Unzip on the pc in the gateway (in for example C:\Folder) You can execute this through script or in the cmd line, requires admin rights! script: …

[Next page](https://forum.inductiveautomation.com/t/question-feature-13209-image-management-in-perspective/20596.md?page=2)
