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:

// Based on user preference
if $theme == "dark"
  .image %logo-dark
else
  .image %logo-light
end

// From a list
set $avatars = [%avatar1, %avatar2, %avatar3]
.image $avatars[$user-choice]

Image Variables

Store image references in variables:

// Set default image
set $user-photo = %default-avatar

// Update based on upload
if $photo-uploaded
  set $user-photo = $uploaded-url
end

.image $user-photo

Best Practices

• Use local references (%) for static app images
• Use URLs for dynamic or user-generated content
• Consider image size and loading performance
• Provide fallback images for better user experience

More content coming soon…