Images
Images can be pictures from your local /Assets/images folder, remote images, or one of the built-in icons.
Pictures are shown at their natural size by default; you'll usually want to add the `resizable()` modifier to make them scalable:
Image("/images/photos/rug.jpg", description: "A rug. Not a dog, a rug.")
.resizable()
Most images should be created with a description value provided, for screen readers.
If you’re working with large images, consider using the lazy() modifier to have them loaded lazily.
Icons
You can also create images from icons. If they are inside Text, they will resize with the font:
let icons = ["airplane", "apple", "arrow-counterclockwise", "award", "balloon", "book", "brightness-high"]
ForEach(Font.Style.allCases) { font in
Text {
for icon in icons {
Image(systemName: icon)
.margin(.trailing, 20)
}
}
.font(font)
}
Use the foregroundStyle() modifier to recolor your icons, like this:
let colors = [Color.green, .blue, .indigo, .slateGray, .gold, .orange, .tomato, .gray]
Text {
ForEach(zip(icons, colors)) { icon, color in
Image(systemName: icon)
.foregroundStyle(color)
.margin(.trailing, 20)
}
}
.font(.title1)Tip: Make sure your site configuration options enables the built-in icons.
In case you hadn't noticed, this page uses a custom theme that places some random content on the right-hand side.
Remote images
You can also use images stored remotely, but please make sure you receive permission from the site owner first.
Image("https://picsum.photos/1280/960", description: "A random public domain image.")
.resizable()**Important:** Some sites block remote loading like this. If that's a deliberate choice you should respect that, but if you have spoken to the site owner and they are happy for you to do so, you can often circumvent the problem by adding a tag to the HTML header by adapting the Ignite `MainLayout` struct:
struct MyMainLayout: Layout {
var body: some Document {
Head {
MetaTag(name: "referrer", content: "no-referrer")
}
Body {
content
IgniteFooter()
}
}
}