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:

Use dark colors for code blocksCopy
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:

Use dark colors for code blocksCopy
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:

Use dark colors for code blocksCopy
<img style={{width: '200px', height: '200px'}} src={`${props.context.folderUrl}dist/runtime/assets/large-image.jpg`}/>
<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.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.