---
title: "Bild einbetten"
slug: "how-to-add-images-to-an-app"
status: "update"
updated: 2026-10-22T09:48:31Z
published: 2026-10-22T09:48:31Z
canonical: "support.tulip.co/how-to-add-images-to-an-app"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.tulip.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Bild einbetten

Es gibt drei Möglichkeiten, Bilder zu einer App hinzuzufügen:

1. Kopieren und Einfügen aus der Zwischenablage Ihres Computers in Chrome
2. Manuelles Hochladen von Ihrem Desktop
3. Verwenden Sie eine Bild-URL

## Bild kopieren und einfügen

Sie können Bilder mit den Tastenkombinationen STRG+C und STRG+V unter Windows sowie CMD+C und CMD+V auf dem Mac in Apps kopieren und einfügen.

## Ein Bild hochladen

### Bild-Widget

1. Navigieren Sie in der App zu dem entsprechenden Schritt.
2. Klicken Sie in der Symbolleiste auf **„Einbetten“** und wählen Sie **„Bild“** aus dem Dropdown-Menü aus.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20to%20Add%20Images%20To%20An%20App_92248679.png)

1. Konfigurieren Sie auf der Registerkarte „Widget“ im Kontextbereich die **Datenquelle** auf **„Statischer Wert**“.
2. Fügen Sie die Bild-URL in das Feld unten ein oder klicken Sie auf die Schaltfläche „Hochladen“, um ein Bild von Ihrem lokalen Laufwerk auszuwählen.

### Ziehen Sie das Bild in einen Schritt.

Sie können Bilder auch von Ihrem lokalen Laufwerk anklicken, ziehen und in einen Schritt ablegen.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20to%20Add%20Images%20To%20An%20App_92249780.png)

## Variable für die Bild-URL

Sie können [eine Variable](/r230/docs/how-to-create-and-use-variables) vom Typ „Bild“ [erstellen](/r230/docs/how-to-create-and-use-variables) und dann ein bestimmtes Bild als Standardwert speichern. Alternativ können Sie diese Variable im Trigger-Editor mit einem neuen Bild aktualisieren.

1. Klicken Sie im Side Pane auf die Registerkarte **„App“** und dann auf ***das „X“*** neben **„Variablen**“.

![Variables1](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Variables1.png)

1. Klicken Sie auf  **„+ Variable erstellen**“.
2. Benennen Sie die Variable „testimage“ und wählen Sie als Typ **„Bild-URL“** aus.
3. Klicken Sie unter **„Standardwert**“ auf das **Symbol „Hochladen** “.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20to%20Add%20Images%20To%20An%20App_119727099.png)

Sie können dieses Bild über einen Trigger aktualisieren. Verwenden Sie „Datenbearbeitung“ --> „Speichern“, um eine neue Bild-URL hinzuzufügen oder ein Bild in diese Variable hochzuladen.

## Bild gestalten und Trigger hinzufügen

Sie können die folgenden Eigenschaften von Bildern bearbeiten, nachdem sie in Tulip hochgeladen wurden – im Kontextbereich auf der rechten Seite des Bildschirms:

- Bildgröße
- Drehung
- Schlagschatten
- Rahmen
- Blinken

Sie können einem Bild auch einen Auslöser hinzufügen oder beim Anklicken eine Vollbildversion davon anzeigen lassen. Verwenden Sie dazu das Menü **„Klickaktionen“** im Seitenbereich, nachdem Sie das Bild ausgewählt haben.

## Technische Details zur Bildunterstützung

Tulip unterstützt die folgenden Bildformate:

|  | Maximale Dateigröße |
| --- | --- |
| PNG | 20 MB |
| JPEG | 20 MB |
| GIF | 5 MB |
| SVG | 5 MG |

              NOTE

              

JPEG and PNG will be automatically resized to 1920 x 1200 at maximum.

{{snippet.Haben Sie gefunden, wonach Sie gesucht haben?}}

**Side Pane** **(Context Pane)**

The **Side Pane** is the configuration pane on the right side of the **App Editor** where steps, apps, and widgets can be configured. **Triggers** can be added to adjust widget behavior.![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Context%20Pane.png)