<image> element displays an image on the screen. Image data can be provided as a local resource (bundled with the mobile app), a remote resource fetched from a server, or a image encoded into the URI.
<screen> <styles> <style id="Image" flex="1" height="128" margin="24" width="128" /> <style id="Image__Styled" borderColor="#e1e1e1" borderRadius="64" borderWidth="4" /> </styles> <body scroll="true"> <image source="/ui_elements/image.jpg" style="Image" /> <image source="/ui_elements/image.jpg" style="Image Image__Styled" /> </body> </screen>
<image> element can appear anywhere within a
<screen> element (including in the body or header).
<image> element accepts the standard behavior attributes, including all triggers (press, refresh, visible, etc).
A URI specifying the resource with image data. The URI must follow one of the following formats:
- Absolute URL: eg
http://s3.amazonaws.com/instawork/profile.png. The image will be requested from the remote server.
- Relative URL: eg
/img/profile.png. The image will be requested from a remote server. The host will be the same as the screen's host. For example, if the screen was loaded from
https://instawork.com/about, the image would be requested from
- Local URL: eg
./profile.png. This image must be bundled as an asset in the mobile app.
- Data URI: eg
data:image/png;base64,iVBORw. The image data is encoded in the attribute, so no requests will need to be made.
A space-separated list of styles to apply to the element. See Styles. Note that text style rules cannot be applied to an
NOTE: Most elements in Hyperview do not require an applied style, but images require a style with rules that specify
height. Without a style that specifies image dimensions, the image will render as using 0x0 dimensions and won't appear on the screen.
A global attribute uniquely identifying the element in the whole document.
|false (default), true||No|
hide="true", the element will not be rendered on screen. If the element or any of the element's children have a behavior that triggers on "load" or "visible", those behaviors will not trigger while the element is hidden.