Preface

This article contains strong personal opinions. If you find it uncomfortable to read, please close it immediately. This article is for personal learning records only. You are welcome to reproduce or share it within the scope of the license agreement. Please respect copyright and keep the original link. Thank you for your understanding and cooperation. If you find this site helpful, you can subscribe via RSS. Thank you for your support!

In SwiftUI, the Image view can be used to display image resources. You can change the appearance and behavior of an Image through various modifiers (i.e., view modifiers). Here are some commonly used Image modifiers:

• 1.interpolation: Sets the interpolation method for the image, used to define rendering quality when the image is scaled.

  1 2	Image("example") .interpolation(.medium)

• 2.resizable: Makes the image stretchable, typically used with .aspectRatio to maintain the image’s original aspect ratio.

  1 2	Image("example") .resizable()

• 3.aspectRatio: Sets the aspect ratio of the image, which can be a fixed value or inherited from the image itself.

  1 2	Image("example") .aspectRatio(contentMode: .fit)

• 4.frame: Sets a fixed size for the image.

  1 2	Image("example") .frame(width: 100, height: 100)

• 5.clipped: Determines whether to clip the image to fit the specified size.

  1 2	Image("example") .clipped()

• 6.antialiased: Sets whether to apply anti-aliasing to the image.

  1 2	Image("example") .antialiased()

• 7.renderingMode: Changes the rendering mode of the image, such as .original, .template, etc.

  1 2	Image("example") .renderingMode(.template)

• 8.opacity: Sets the transparency of the image.

  1 2	Image("example") .opacity(0.5)

• 9.overlay: Overlays another view on top of the image.

  1 2	Image("example") .overlay(Circle().foregroundColor(.red))

• 10.background: Sets a background color or another view behind the image.

  1 2	Image("example") .background(Color.gray)

• 11.clipShape: Clips the image into a specific shape, such as a circle, rectangle, etc.

  1 2	Image("example") .clipShape(Circle())

• 12.mask(shape:): Uses the shape of another view to clip the image.

  1 2	Image("example") .mask(Circle())

• 13.padding: Adds padding around the image.

  1 2	Image("example") .padding()

• 14.contentShape: Specifies an implicit outline for the image, useful in interaction design.

  1 2	Image("example") .contentShape(Rectangle())

• 15.onTapGesture: Adds a tap gesture recognizer to the image.

  1 2 3 4

  Image("example") .onTapGesture { print("Image tapped") }

• 16.scaledToFit(): Scales the image to fit its parent view while maintaining its aspect ratio.

  1 2 3

  Image("example") .resizable() .frame(width: 100, height: 100)

• 17.scaledToFill(): Scales the image to fill its parent view, which may crop parts of the image.

  1 2 3

  Image("example") .resizable() .scaledToFill()

• 18.cornerRadius(radius:): Adds rounded corners to the image.

  1 2	Image("example") .cornerRadius(10)

• 19.foregroundColor(color:): Sets the foreground color of the image, typically used for template images.

  1 2 3

  Image("example") .renderingMode(.template) .foregroundColor(.blue)

• 20.symbolRenderingMode(mode:): Used for system icons, sets the rendering mode of the icon.

  1 2 3

  Image(systemName: "wifi") .symbolRenderingMode(.hierarchical) .foregroundColor(.blue)

• 21.foregroundStyle(style:): Used for system icons, sets multi-layer colors for the icon.

  1 2	Image(systemName: "wifi") .foregroundStyle(Color.pink, Color.green)

• 22.visualEffect(effect:): Directly uses the view’s GeometryProxy in a closure without disrupting the current layout, applying specific modifiers to the view.

  1 2 3 4

  Image("example") .visualEffect { content, geometryProxy in content.offset(x: geometryProxy.frame(in: .global).origin.y) }

Summary

These are some of the most commonly used modifiers for the Image view. Just recording them here.