# About Displaying Images to User

ConnectiveOne supports sending images to users in two ways: through the constructor UI or through action `send_photo`. This allows showing users visual content, which improves user experience and promotes better information understanding.

---

## Context and Problem

In many scenarios, you need to show images to users:
- Product catalogs with photos
- Instructions with screenshots
- Advertising materials
- Diagrams and infographics

Displaying images solves this task by allowing sending images to users in bot scenarios.

---

## Key Concepts

### Ways to Send Images

**Through UI constructor:**
- Quick way for simple cases
- Supported for blocks: "Message to User", "Wait for User Response", "Message with Keyboard"
- Can upload file or add link

**Through action send_photo:**
- Extended way for complex cases
- Allows sending multiple images simultaneously
- Supports placeholders and dynamic image selection

### Formats and Limitations

**Supported formats:**
- JPG, JPEG, PNG, GIF, WebP

**Size limitations:**
- Telegram: up to 10 MB
- Viber: up to 20 MB
- Widget: depends on settings

---

## Approach Options

### UI Constructor vs action send_photo

**UI Constructor:**
- ✅ Pros: Simplicity, quick setup
- ❌ Cons: Limited flexibility

**Action send_photo:**
- ✅ Pros: Flexibility, support for multiple images, dynamic selection
- ❌ Cons: More complex setup

**Why we use both approaches:**
UI constructor suits simple cases, and action send_photo — for complex scenarios with dynamic image selection.

---

## Adopted Solutions

### Automatic Public Link Generation

Images uploaded through File Manager automatically receive a public link that can be used in action `send_photo`.

### Placeholder Support

In image URLs, you can use placeholders that will be replaced with values from constants, allowing dynamically selecting images.

### Sending Multiple Images

Action `send_photo` allows sending multiple images in one action, they will be sent sequentially.

---

## Implications for Users and Implementation

### For Integrators

When using images, it's important to:

1. **Choose sending method** — UI constructor or action send_photo
2. **Check format and size** — compliance with channel limitations
3. **Use public URLs** — for images through action send_photo
4. **Optimize size** — for faster loading

### Common Errors

**Error:** Image does not display  
**Problem:** Incorrect URL or file format  
**Solution:** Check URL and image format

**Error:** Image is too large  
**Problem:** File size exceeds channel limitation  
**Solution:** Optimize image size or use another format

**Error:** Placeholders do not work  
**Problem:** Incorrect placeholder syntax or missing value  
**Solution:** Check placeholder syntax and value presence in constants

---

## Usage Examples

### Sending Single Image

```json
{
  "product": "https://example.com/images/product.jpg"
}
```

### Sending Multiple Images

```json
{
  "name1": "https://example.com/images/photo1.jpg",
  "name2": "https://example.com/images/photo2.jpg",
  "name3": "https://example.com/images/photo3.jpg"
}
```

### Using Placeholders

```json
{
  "product": "{{product_image_url}}",
  "logo": "{{company_logo_url}}"
}
```

### Dynamic Image Selection

```json
{
  "constant": "photos_array",
  "key": "{{selected_photo_index}}"
}
```

---

## Related Documents

- **How-to:** [Add Image to Broadcast](/en/broadcast/how-to/add-image-to-broadcast.md) — working with media in broadcasts