View Source ImageView

Overview

There are two possible sources for images: system-provided images (SF Symbols) or the app’s asset catalog.

SF Symbols

The platform provides a wide variety of symbol images which are specified with the systemName attribute. See Apple’s documentation for more information.

Asset Catalog

Specify the name attribute to use a named image from the app’s asset catalog.

<Image name="MyCustomImage" />

Variable Value

Some symbols and asset images support a value input. Use the variableValue attribute to set this value.

<Image systemName="chart.bar.fill" variableValue={0.3} />
<Image systemName="chart.bar.fill" variableValue={0.6} />
<Image systemName="chart.bar.fill" variableValue={1.0} />

Image Labels

Text content within the image will be used as the accessibility label.

<Image name="landscape">
  Mountain landscape with a lake in the foreground
</Image>

Modifying Images

Use image modifiers to customize the appearance of an image.

"heart" do
    resizable()
    symbolRenderingMode(.multicolor)
end

<Image systemName="heart.fill" class="heart" />

Attributes

• systemName
• name
• variableValue

SwiftUI Documentation

See SwiftUI.ImageView for more details on this View.

References