Async Image

An Image layer that asynchronously loads and displays an image.

Overview

The Async Image layer is used for downloading and displaying remote images from the internet. It has two properties that you can configure from the Inspector panel: URL and Scale.

Async Image Parameters

The Async Image will be populated with the URL you set in the Inspector panel. Use the Scale parameter to select the pixel density of the remote image.

Image Placeholder

By default, the Async Image layer displays a gray Rectangle while the remote image is loading. This is called the image's Placeholder.

You can customize the placeholder by expanding the Async Image layer in the Layers panel and changing the contents of the Placeholder container.

<div class="callout note">Note
‍You can force the Async Image layer to reload its image and preview the Placeholder by toggling the Scale property on the Async Image.</div>

When it has finished loading, the Async Image will replace the Placeholder with an Image layer populated with the remote image it downloaded from the internet.

Resizing the Image Layer

By default the Image layer has no modifiers applied to it and its Fill property is set to Original Size.

You can customize the Image layer by expanding the Async Image in the Layers panel and changing the Image layer contained in the Content container.