Creates an image element with optional responsive sizing and circular styling.

Syntax

Result = MaterialSB::Image(Source.s, Alt.s = "", Flags = #Media_Default, Parent = #Null)

Parameters

Source.s	The image URL or path.
Alt.s	Optional. Alternative text for accessibility.
Flags	Optional. Combination of media flags for styling.
Parent	Optional. Parent element. If #Null, uses the current parent from the stack.

Flags

Flag	Description
#Media_Default	Standard image (default)
#Media_Responsive	Image scales to container width
#Media_Circle	Circular image (useful for avatars)

Return Value

Returns the image element.

Remarks

Use #Media_Responsive for images that should scale with their container. Combine with #Media_Circle for circular responsive images.

Example

Procedure Main(Success)
  If Success
    MaterialSB::Row(MaterialSB::#Grid_Container)
      ; Responsive image
      MaterialSB::Col(12, 6, 4)
        MaterialSB::Append(MaterialSB::Header("Responsive Image", 5))
        MaterialSB::Image("images/landscape.jpg", "Landscape photo", MaterialSB::#Media_Responsive)
      MaterialSB::CloseCurrentParent()
      
      ; Circular avatar
      MaterialSB::Col(12, 6, 4)
        MaterialSB::Append(MaterialSB::Header("Avatar", 5))
        MaterialSB::Image("images/avatar.jpg", "User avatar", MaterialSB::#Media_Circle | MaterialSB::#Media_Responsive)
      MaterialSB::CloseCurrentParent()
      
      ; Standard image
      MaterialSB::Col(12, 6, 4)
        MaterialSB::Append(MaterialSB::Header("Standard Image", 5))
        MaterialSB::Image("images/photo.jpg", "A photo")
      MaterialSB::CloseCurrentParent()
    MaterialSB::CloseCurrentParent()
  EndIf
EndProcedure

MaterialSB::Download(@Main())

See Also

Video(), YoutubeVideo(), CardImage()