# 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..**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://eneskaraosman53.gitbook.io/swiftui/ui-components/image.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.