Image

Overview#

Displays an image from a URL. Loaded asynchronously by the native platform — AsyncImage on iOS, Coil on Android.

Copied!

<native:image
    src="https://picsum.photos/seed/nativephp/400/300"
    :width="200"
    :height="150"
    :fit="2"
    class="rounded-xl"
/>

<native:image
    src="https://picsum.photos/seed/nativephp/400/300"
    :width="200"
    :height="150"
    :fit="2"
    class="rounded-xl"
/>

Props#

All shared layout and style attributes are supported, plus:

src - Image URL (required, string)
fit - Content fit mode (optional, int, default: 1):
- 0 / 1 — fit (scale to fit within bounds, preserving aspect ratio)
- 2 / 3 — fill (scale to fill bounds, cropping excess)
tint-color - Apply a color tint as hex string (optional)
alt - Accessibility alt text (optional). When set, screen readers announce the image with this label; when omitted, the image is treated as decorative and hidden from VoiceOver/TalkBack. See Accessibility

Examples#

Basic image#

Copied!

<native:image src="https://picsum.photos/seed/hero/800/400" class="w-full rounded-xl" :height="200" :fit="2" />

<native:image src="https://picsum.photos/seed/hero/800/400" class="w-full rounded-xl" :height="200" :fit="2" />

Rounded avatar#

Copied!

<native:image
    src="https://i.pravatar.cc/128?img=12"
    :width="64"
    :height="64"
    :fit="2"
    class="rounded-full"
/>

<native:image
    src="https://i.pravatar.cc/128?img=12"
    :width="64"
    :height="64"
    :fit="2"
    class="rounded-full"
/>

Tinted icon image#

Copied!

<native:image
    src="https://www.php.net/images/logos/new-php-logo.png"
    :width="80"
    :height="42"
    :fit="1"
    tint-color="#7C3AED"
/>

<native:image
    src="https://www.php.net/images/logos/new-php-logo.png"
    :width="80"
    :height="42"
    :fit="1"
    tint-color="#7C3AED"
/>

Image in a card#

Copied!

<native:column class="w-full p-2 rounded-2xl border border-theme-outline bg-theme-surface">
    <native:image src="https://picsum.photos/seed/cover/800/360" class="w-full rounded-xl" :height="180" :fit="2" />
    <native:column class="p-3 gap-2">
        <native:text class="text-lg font-bold text-theme-on-surface">Article Title</native:text>
        <native:text class="text-base text-theme-on-surface-variant">A brief description of the article.</native:text>
    </native:column>
</native:column>

<native:column class="w-full p-2 rounded-2xl border border-theme-outline bg-theme-surface">
    <native:image src="https://picsum.photos/seed/cover/800/360" class="w-full rounded-xl" :height="180" :fit="2" />
    <native:column class="p-3 gap-2">
        <native:text class="text-lg font-bold text-theme-on-surface">Article Title</native:text>
        <native:text class="text-base text-theme-on-surface-variant">A brief description of the article.</native:text>
    </native:column>
</native:column>

Element#

Copied!

use Native\Mobile\Edge\Elements\Image;
 
Image::make('https://picsum.photos/seed/nativephp/400/300')
    ->fit(2)
    ->tintColor('#7C3AED');

use Native\Mobile\Edge\Elements\Image;

Image::make('https://picsum.photos/seed/nativephp/400/300')
    ->fit(2)
    ->tintColor('#7C3AED');

make(string $src = '') - Create an image with a source URL
fit(int $mode) - 0/1 = fit, 2/3 = fill
tintColor(string $hex) - Apply a color tint