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="cover"
    class="rounded-xl"
/>

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

Props#

All shared layout and style attributes are supported, plus:

src - Image URL (required, string)
fit Changed 4.7 - How the image fills its frame, following CSS object-fit. Takes none, contain, cover or fill, an ImageFit case, or the integer 0/1/2/3 (optional, default: contain):
- none (0) - Draws the image at its own size, one image pixel per point on iOS or per dp on Android, centered and cropped to the frame
- contain (1) - Scales the image to fit inside the frame, keeping its aspect ratio, and centers it
- cover (2) - Scales the image to fill the frame, keeping its aspect ratio, centered and cropped
- fill (3) - Stretches the image to the frame's exact width and height, ignoring its aspect ratio
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="cover" />

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

Rounded avatar#

Copied!

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

<native:image
    src="https://i.pravatar.cc/128?img=12"
    :width="64"
    :height="64"
    fit="cover"
    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="contain"
    tint-color="#7C3AED"
/>

<native:image
    src="https://www.php.net/images/logos/new-php-logo.png"
    :width="80"
    :height="42"
    fit="contain"
    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="cover" />
    <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="cover" />
    <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;
use Native\Mobile\Edge\Enums\ImageFit;
 
Image::make('https://picsum.photos/seed/nativephp/400/300')
    ->fit(ImageFit::Cover)
    ->tintColor('#7C3AED');

use Native\Mobile\Edge\Elements\Image;
use Native\Mobile\Edge\Enums\ImageFit;

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

make(string $src = '') - Create an image with a source URL
fit(int|string|ImageFit $mode) Changed 4.7 - none/contain/cover/fill, an ImageFit case, or 0/1/2/3
tintColor(string $hex) - Apply a color tint