Images

Images can be inserted into your app using a single line of code with a reference to the name of the image, either as a URL or as a file system path. If specifying the source path of the image, it must first be placed into the resources folder inside of your project. You can drag-and-drop the image file from Windows Explorer directly into the resources folder.

By default all images and GIFs are inspectable (i.e. open in a larger view on tap). You can toggle this option by setting the inspect attribute in the image tag to false. 

Example 1: Image

This example inserts a web-based image into an app and applies a small style to it to reduce its size. The size styles are available at the bottom of this page. 

You can not copy this example into your document as-is, as the URL is not valid.

<image src="http://website.com/logo.jpeg" style="small" />
 
image-from-web.jpg
 

Example 2: GIF

In this example a GIF inside the resources folder of the project is inserted into the app.

You can not copy this example into your document without including a GIF file in your resources folder.

<image src="resources\logo.gif" style="medium"/>
 
 

Example 3: In Line Image

This example inserts an image in-line with text. The image autoscales to the height of the surrounding text.

You can not copy this example into your document without including an image file in your resources folder.

<p>
  This sentence contains an image here: <image src="resources\logo.jpg"/>
</p>
 
inline-image.jpg
 

Example 4: Side-by-Side Images

To insert two or more images or GIFs next to each other, use a table with the grid lines turned off.

You can not copy this example into your document without including an image file in your resources folder.

<table grid="false" widths="50% 50%">
  <row>
    <column>
      <image src="resources/logo.png" style="medium"/>
    </column>
    <column>
      <image src="resources/logo.png" style="medium"/>
    </column>
  </row>
</table>
 
image-table.jpg
 

If you would like your images to contain captions, insert a figure and title (as outlined in Captions) inside the table cell.

Note: Vertical alignment inside of table cells does not work at this time. All images in tables will be aligned to the top of the cell.

 

Image Styles