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://example.com/photo.jpg" :width="200" :height="150" :fit="2" :border-radius="12" />

<native:image src="https://example.com/photo.jpg" :width="200" :height="150" :fit="2" :border-radius="12" />

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://example.com/hero.jpg" class="w-full" :height="200" :fit="2" />

<native:image src="https://example.com/hero.jpg" class="w-full" :height="200" :fit="2" />

Rounded avatar#

Copied!

<native:image
    src="https://example.com/avatar.jpg"
    :width="64"
    :height="64"
    :fit="2"
    :border-radius="32"
/>

<native:image
    src="https://example.com/avatar.jpg"
    :width="64"
    :height="64"
    :fit="2"
    :border-radius="32"
/>

Tinted icon image#

Copied!

<native:image
    src="https://example.com/logo.png"
    :width="40"
    :height="40"
    tint-color="#7C3AED"
/>

<native:image
    src="https://example.com/logo.png"
    :width="40"
    :height="40"
    tint-color="#7C3AED"
/>

Image in a card#

Copied!

<native:column class="w-full rounded-2xl" :border-width="1" border-color="#E2E8F0" bg="#FFFFFF">
    <native:image src="https://example.com/cover.jpg" class="w-full" :height="180" :fit="2" />
    <native:column class="p-4 gap-2">
        <native:text class="text-lg font-bold">Article Title</native:text>
        <native:text class="text-base text-slate-500">A brief description of the article.</native:text>
    </native:column>
</native:column>

<native:column class="w-full rounded-2xl" :border-width="1" border-color="#E2E8F0" bg="#FFFFFF">
    <native:image src="https://example.com/cover.jpg" class="w-full" :height="180" :fit="2" />
    <native:column class="p-4 gap-2">
        <native:text class="text-lg font-bold">Article Title</native:text>
        <native:text class="text-base text-slate-500">A brief description of the article.</native:text>
    </native:column>
</native:column>

Element#

Copied!

use Native\Mobile\Edge\Elements\Image;
 
Image::make('https://example.com/photo.jpg')
    ->fit(2)
    ->tintColor('#7C3AED');

use Native\Mobile\Edge\Elements\Image;

Image::make('https://example.com/photo.jpg')
    ->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