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:
- inline the assets
- 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:
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:
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:
<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.