IMG source local file system

Photoshop
1

I would like to use an HTML IMG element to display an image in our UXP panel UI. Loading and displaying images work fine when src is an public internet URL (https://www.xyz.com/image_file_name.jpg), however, I would prefer to load images from the local PluginData folder.

I tried the following in Windows without success and I haven’t noticed any errors in the logs: src=“file:///C://Users//myusername//AppData//Roaming//Adobe//UXP//PluginsStorage//PHSP//22//Developer//uxp_pane_id//PluginData//image_file_name.jpg”. The same path worked fine in a regular web browser.

Should this work and what is the proper way to set src?

Thanks

2

As far as I know, uxp cannot access files outside the project folder silently, because uxp needs a token to access external files, which needs to be selected by the user.

3

Relative paths should work though, if the file is inside your plugin folder.
Try something like src="/images/logo.png" (starting from your plugin root) instead of an absolute path.

edit: Oh, I misread the question, thought you were talking about the plugin folder that your project is in. I don’t think that you can reference a file outside the project root (like the plugin data folder) via an image src attricute.

4

Since the images I want to display are in the PluginData folder, I can get the tokens programmatically, with require(“uxp”).storage.localFileSystem.createSessionToken(entry_for_image_file_in_plugin_data_folder).

In this case, is there a way to use this token as the source for the IMG HTML element?

Thanks

5

I am not sure but, if you want to display an image on your panel, you can do like I have done if the image is in the Images folder of your project.
You only have to write the following in the HTML file:
<sp-action-button class="invisibleButton" id="btn_1" style="height: 40px; width: 40px; position: absolute; top: 0px; left: 0px;"><img src="images/3a.jpg"></sp-action-button>
If this is not what you want, I hope it helps

6

If you want to show images from your plugin data folder, use the plugin-data:// URI scheme. The root is relative to your plugin’s data folder.

2 Likes
7

Thanks for all the responses - Kerri gets the prize !

There’s one detail that made me spin my wheels for a bit, plugin-data:// points to the parent of require('uxp').storage.localFileSystem.getDataFolder() so in my case <img src="plugin-data://PluginData//image_file_name.jpg"> gave the results I was looking for.

1 Like
8

Awesome! This helped me a lot too!

9

The plugin-data:// URI scheme works fine. It let me open images.

All the best, John, marketing manager, Work Time.