> For the complete documentation index, see [llms.txt](https://eneskaraosman53.gitbook.io/swiftui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eneskaraosman53.gitbook.io/swiftui/ui-components/image.md).

# Image

* Lokal görsel isimleri
* Sistem ikon isimleri
* ve UIImage

gibi parametreler ile `Image` oluşturabiliriz.

#### 1) **Lokal'de bulunan görseli görüntüleme**

Rastgele bir görseli projeye yükleyin (`Assets` klasörüne sürükleyip bırakabilirsiniz.)

```swift

Image("swift")     // Görsel ismi.
    .resizable()   // Görselin boyutlarına müdahale edebilmek için gerekli.
    .scaledToFit() // AspectRatio oranı korunur.
    .frame(width: 130) 
    // Sistem görüntünün en-boy oranını bildiği için, (.scaledToFit() kullanınca)
    // Yükseklik otomatik olarak hesaplanır.
```

![](/files/-M69KvUGN-MPEeWC4p6i)

```swift
Image("swift")
    .resizable()
    // Görselin rengini değişebilmek için,
    // rendering mode düzenlemeliyiz. (sistem ikonları için gerekmiyor)
    .renderingMode(.template)
    .foregroundColor(.orange)
    // Artık istediğimiz renge boyayabiliriz.
    .scaledToFit()
    .frame(width: 130)
```

![template rendering mode](/files/-M69MZaF208uwLNAmGAG)

{% hint style="info" %}
Görselin boyutlarına müdahale etmeden önce ***resizable()*** metodunu çağırmalıyız.
{% endhint %}

#### 2) Sistem ikonlarını görüntüleme

```swift
Image(systemName: "star.fill")
    .resizable()
    .frame(width: 100, height: 100)
    .foregroundColor(.orange)
    .padding()
    .background(Color.green)
    .clipShape(Circle())
    
// 1. kısımda gerçekleştirdiğimiz işlemler burada da uygulanabilir.
// Hatta sistem ikonları için renderingMode düzenlemesi yapmadan da
// renk düzenlemesi yapabiliriz.
```

{% hint style="success" %}
Sistem ikonları vektörel olduğu için boyuttan bağımsız olarak, çözünürlük endişesi duymadan büyütebiliriz.
{% endhint %}

![sf system icon](/files/-M69R0RE75Av1HbJiIh3)

Kullanabileceğimiz SF Sembollerini görüntüleyebileceğimiz masa üstü uygulamasını [bu link](https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/)ten indirebilirsiniz.

![SF Symbols](/files/-M69PJLcqdaVesu0TXdN)

**TODO: antialiased, interpolation..**