The Image widget allows you to add static and dynamic images to a page.
Examples
Use this widget to support app design requirements such as the following:
- You want to add supporting images to a page that visualizes or corresponds with the represented topics or data.
- You want to show an image on the home page that users can click to be redirected to another website.
Usage notes
For a static image source, there are no limitations for the number of images you can upload.
Note:
You can upload the following image formats: PNG, GIF, JPG, JPEG, and BMP. To preserve optimal performance, there is a 10MB size limit for each upload.
Settings
The Image widget includes the following settings:
- Connect to data—Optionally, connect the widget to specific data, including a data view. (A data source is not required for an Image widget.)
Note:
If you connect to a data source, you can still add a static image, but you can also set a dynamic source from the attributes or expressions based on the data source.
- Image source—Select an image source by either uploading it from local files or providing the URL. The widget supports https and base64 URLs. If applicable to the selected data, click Dynamic and choose Attachment or Symbol to populate the image widget with feature layer attachments or web map feature symbols. Click the Delete button to remove an unused uploaded image.
- If the selected data view contains multiple features, the image widget only displays the attachments or symbols for the first feature.
- The Attachment and Symbol source support data view selection, Selected features, or Auto-populated features (with List).
- Image display quality—For a static local image source (PNG, JPG, and JPEG file formats only), choose from four levels of image display quality: Low, Medium, High, and Original. Use a lower display quality to optimize image loading performance.
- Set link—Add a link on the image to go to other content, such as a page, window, web address, block, or a view in a section in your app. In addition to a web address, you can use the URL option to set a link to go to an email address, phone number, and more. You can choose whether a link opens in the same window as the app, the top window, or a new window.
- Tooltip—Provide hover text to describe the image.
Note:
For ToolTip and alt text input, if a data source is connected, you can either directly type the content (static) or choose dynamic content using attributes, statistics, or expressions based on the data source.
- Alt text—Provide the alt text for assistive technology, such as screen readers.
- Position
- Fill—Fill the widget area with the image, leaving no blank space, but the image may be cropped.
- Fit—Fit the entire image within the widget borders.
Caution:
There is a known limitation in which the Fill option does not render as expected on iOS and macOS devices because of browser rendering mechanism limits. As a workaround, you can choose Fit instead of Fill for small- and medium-screen device layouts.
- Shape—Change the image shape from rectangular to other options such as circular and hexagonal.