Images

Images bring your Rhyme app to life with visual content. From logos and icons to photos and graphics, images help create engaging user experiences.

Working with Images

In Rhyme, images are referenced using the percent sign (%) followed by the image name:

// Display an image
.image %logo

// Use an image in a button
.button "Home" [home] -icon:%house

// Set a background image
.screen -background:%sunset

Image Sources

Images can come from various sources:

Local Images

Images bundled with your app:

.image %app-logo
.image %welcome-banner

Remote Images

Images from URLs:

.image "https://example.com/photo.jpg"

Dynamic Images

Images from variables:

set $user-avatar = %default-avatar
.image $user-avatar

Common Image Patterns

Hero Images

.image %hero -full-width
.title "Welcome!" -overlay

Image Galleries

.grid
  .image %photo1 -tile
  .image %photo2 -tile
  .image %photo3 -tile

Icons and Logos

.image %company-logo -size:small
.button "Settings" [settings] -icon:%gear

Learn More

Explore how to effectively use images to enhance your Rhyme apps!

Basics

Image tags in Rhyme provide a simple and intuitive way to reference images in your app using a percent-based syntax. Instead of dealing with complex file paths or URLs, you can use friendly image tags like %logo, %icon-user, or %background-hero directly in your Rhyme code.

How Image Tags Work

Image tags follow a simple pattern: % followed by an image name. For example:

%logo - References an image named “logo”
%icon-user - References a user icon image
%background-hero - References a hero background image
%photo-team - References a team photo

The Rhyme lexer automatically recognizes these image tags during parsing and converts them into the appropriate image references. This happens at compile time, making image handling efficient and consistent.

Displaying Images

Learn how to show images in your Rhyme app using the .image action and image references.

Basic Image Display

The simplest way to display an image:

.image %logo
.image %banner
.image %profile-pic

Image Sizing

Control how big your images appear:

// Size modifiers
.image %photo -size:small
.image %photo -size:medium
.image %photo -size:large

// Full width images
.image %hero -full-width

// Thumbnail size
.image %preview -thumbnail

Image Positioning

// Alignment
.image %logo -center
.image %icon -left
.image %badge -right

// Floating images
.image %illustration -float:right
.text "This text wraps around the image"

Responsive Images

Images automatically adapt to different screen sizes:

Image Sources

Rhyme supports multiple ways to reference and load images in your app.

Local Image References

Use the percent sign (%) to reference images bundled with your app:

// App images
.image %logo
.image %hero-banner
.image %icon-home

// Organized by folder
.image %icons/settings
.image %backgrounds/sunset
.image %avatars/default

Remote URLs

Load images from the web:

// Direct URL
.image "https://example.com/photo.jpg"

// From a variable
set $photo-url = "https://api.example.com/user/avatar/123"
.image $photo-url

Dynamic Image Selection

Choose images based on conditions: