View Source ImageView

<ImageView>

Displays an image.

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

SwiftUI Documentation

See SwiftUI.ImageView for more details on this View.

References

The name of an image in the app’s asset catalog.

The name of the system image (SF Symbol) to display.

Discussion

See Apple’s documentation for more information.

The value represented by this image, in the range 0.0 to 1.0.