Image
Overview of the Image Component
Image is a tag that will lazily load an image whenever the tag is in the viewport. This is extremely useful when generating a large list as images are only loaded when they're visible. The component uses Intersection Observer internally, which is supported in most modern browsers, but falls back to a set timeout when it is not supported.
Image Video Tutorial
You can check this Appery.io YouTube Education Guide video to learn how to add images to your application:
Properties
Important Note!
This document lists the properties that are specific to this particular UI component.
To check for the properties common for most UI components, please check the General components document.
The Image component has the following Common properties:
| Property Name | Property Description |
|---|---|
| Image | Click the Change button to select the uploaded image from Media Manager. |
| Ionic Image | If set to True, image tag <img> will be changed to Ionic image tag <ion-img>. The default is set to True. |
| Wrapper | Choose an Ionic tag (Avatar or Thumbnail) that will be used as a wrapper of a default image. |
| Responsive | If set to True, automatically adjusts to fit the screen size. The default is set to False. |
| Shape | Image style. Used for default HTML images only. |
| Alt. Text | This attribute defines the alternative text describing the image. |
| Alt Text I18n | If set to True then use the Alt. Text property for internationalization. |
The properties Responsive and Shape are not available when Ionic Image is set to True or Wrapper is Avatar or Thumbnail.
Visit the Ionic documentation to read more about images.
Updated about 5 hours ago