Image
Overview of the Image Component
The Image component is a tag that lazily loads images only when they enter the viewport. This feature is extremely useful when generating large lists, as images are loaded only when they become visible to users. The component uses the Intersection Observer API internally, which is supported in most modern browsers. When Intersection Observer is not supported, it falls back to a timeout-based approach.
Image Video TutorialYou can watch 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 the properties common to most UI components, please refer to the General components document.
The Image component has the following Common properties:
| Property Name | Property Description |
|---|---|
| Image | Click the Change button to select an uploaded image from the Media Manager. |
| Ionic Image | When set to True, the standard <img> tag will be replaced with the Ionic <ion-img> tag. The default value is True. |
| Wrapper | Choose an Ionic tag (Avatar or Thumbnail) to be used as a wrapper for the default image. |
| Responsive | When set to True, the image automatically adjusts to fit the screen size. The default value is False. |
| Shape | Defines the image style. This property is used for default HTML images only. |
| Alt. Text | This attribute defines the alternative text that describes the image for accessibility purposes. |
| Alt Text I18n | When set to True, the Alt. Text property will be used for internationalization. |
The Responsive and Shape properties are not available when Ionic Image is set to True or when Wrapper is set to Avatar or Thumbnail.
Visit the Ionic documentation to learn more about images.
Updated 20 days ago