Use assets

General guidelines for using assets

Widgets may need to use assets like images and videos. Below outlines approaches to use assets in an ArcGIS Experience Builder widget.

In general, there are two ways to use assets:

1. inline the assets
2. load the assets dynamically

Inline assets

For small assets, such as images, this is a reasonable approach as the smaller assets have a limited negative impact on network performance. To inline assets, you can require() the assets, like:

1
2
const smallImage = require('./small-image.png')
<img style={{width: '200px', height: '200px'}} src={smallImage}/>

For an .svg file, if you wish to inline and render the file as SVG DOM, place the file in the assets/icons folder and then require() it, like this:

1
2
const svg = require('./assets/icons/mysvg.svg')
<Icon icon={svg} color="red" width="200px" height="200px"/>

Load dynamically

For videos and large images, a reasonable approach is to load the assets dynamically instead of inline as the larger assets are more apt to negatively impact network performance.

To load assets dynamically, there are two options. If the assets are used in runtime, place the files in the runtime/assets folder. Otherwise, the assets should be place in the setting/assets folder. You can then use the assets like:

1
2
3
<img style={{width: '200px', height: '200px'}} src={`${props.context.folderUrl}dist/runtime/assets/large-image.jpg`}/>
or
<Icon icon={`${props.context.folderUrl}dist/runtime/assets/mysvg.svg`} color="red" width="200px" height="200px"/>

The latter (above) will render the .svg files as SVG DOM.

Please refer to the use-assets sample widget to get started using assets and for any additional details.