# Image Element

The Image Element lets you add a standalone image to your app screen, perfect for visual banners, promo cards, logos, or clickable graphics. Like a button, you can also link the image to a URL or screen.

***

{% tabs %}
{% tab title="Content Tab" %}

## <mark style="color:green;">Add Your Image</mark>

* Select Image – Upload your image (JPEG, PNG, etc.)
* Click Action – Add a URL or app screen link

  Example: <https://yourdomain.com> or twinr://about

📌 **Tip**: Use this element for visual-only promotions or when you don’t need text/buttons layered on top.
{% endtab %}

{% tab title="Settings Tab" %}

## <mark style="color:green;">Customize the Look</mark>

### 🎨 Design

* Ratio – Choose aspect ratio (e.g., 1:1, 16:9, 4:3)
* Corner Radius – Adjust how rounded the image corners are
  * Options: Square → Rounded → Pill
* Display Mode:
  * Fit – Keeps full image visible (may leave white space)
  * Fill – Covers the container area (may crop image)

### 📏 Margin

Adjust padding around the image:

* Top, Bottom, Left, Right – all customizable via sliders

### 👁️ Visibility Options

Control where and when the image shows:

* Platform: iOS, Android, PWA, All
* Device: Mobile, Tablet, All
* User: Guest, Logged-in, All
  {% endtab %}
  {% endtabs %}

## <mark style="color:green;">📱 Use Case Ideas</mark>

* Promotional banners
* Logos or brand visuals
* Full-width hero images
* Image-based navigation (clickable tiles)

## <mark style="color:green;">✅ Summary</mark>

| Feature      | What You Can Do                       |
| ------------ | ------------------------------------- |
| Image        | Upload an image                       |
| Click Action | Add a URL or screen link              |
| Ratio & Fit  | Control image scaling and size        |
| Styling      | Apply rounded corners, adjust spacing |
| Visibility   | Platform/device/user targeting        |


---

# 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://help.twinr.dev/native-screen/image-element.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.