How to import a logo.png into a custom widget

805
3
Jump to solution
11-28-2019 12:14 PM
AnthonyLibetti
New Contributor II

I am looking to add a footer to my custom widget which includes a logo.png of my institution. I add the .png to apps/2/widgets/customwidget/images folder and import them as an html <img> tag but the root directory that is searched for the images folder is apps/2. I want this custom widget to be as plug and play portable as possible and therefore need the images to remain in the customwidget folder. Is there any way to import images from within the customwidget directory?

0 Kudos
1 Solution

Accepted Solutions
ThanHtetAung_EsriAu
Esri Regular Contributor

Hi Anthony Libetti

 Use this.folderUrl variable, it will  give you the current custom widget location/path, and then manipulate logo.png location accordingly.

This is easier, it is hard to manage if you use like relative path/absolute path to pin/point logo.png.

View solution in original post

3 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Anthony,

  Is this question regrading WAB or the JS API? It's confusing because you have this in the JS API space but it sounds like a WAB question.

0 Kudos
AnthonyLibetti
New Contributor II

The question is regarding the JS API, I'm referring to a custom widget that my organization is hosting and I was looking to manipulate that logo from within the widget.js file. I was finding that the images folder within the widget's directory wasn't automatically accessed by the widget.html when specifying <img> uri but rather the app's root directory. As a workaround, I used jquery to append the <img> to the custom widget's footer on postcreate so I don't have to crawl through user directory's to find the custom widget and search for the logo.png.

0 Kudos
ThanHtetAung_EsriAu
Esri Regular Contributor

Hi Anthony Libetti

 Use this.folderUrl variable, it will  give you the current custom widget location/path, and then manipulate logo.png location accordingly.

This is easier, it is hard to manage if you use like relative path/absolute path to pin/point logo.png.