---
title: "Images"
slug: "images"
category: "Mini Widgets"
hosts: "vue"
---

# Images

## AI Defaults (read first)

- **Function name**: `arcCustomImage`.
- **value**: Image URL or Base64 string.
- **width**, **height**: Set dimensions directly.
- **borderRadius**: E.g. `"8px"` for rounded corners, `"50%"` for circular.
- **objectFit**: `"cover"` (crop to fill) or `"contain"` (fit inside).

# Custom Image

![](https://framerusercontent.com/images/h6ypxIbc4vHFWhQqTPFfWjn1k.png)

Mit Images kannst du Bilder in Tabellen, Kanban oder anderen Widgets laden. Du hast etliche Einstellungen, von Umrandung bis Abrundung über Größeneinstellungen.


```javascript
arcCustomImage({
        uniqueId: "ProjektBild"+Nr,
        title: "Logo",
        width: "80px",
        height: "80px",
        backgroundSize: "cover",
        backgroundColor: "",
        style: "", // Hier kannst du eigene CSS Styles hinterlegen.
        radius: "5px",
        borderColor: "",
        link: text(Projekt.'Bild URL') // Hier musst du immer einen shareLink deines Bildes hinterlegen.
})
```

#### Allgemeine Settings

### uniqueId

Die ***uniqueId*** vergibst du individuell und sollte einzigartig sein. Sinn dahinter ist: Wenn du mehrere Images mit unterschiedlichen Settings auf deiner Oberfläche erstellst, überschreiben sich die Styles nicht.


```javascript
uniqueId: "ProjektBild" + Nr // Text in " + Ninox Nr
```

### title


```javascript
title: "Logo",
```

### width

Mit*** width*** kannst du die Breite des Bild Containers einstellen.


```javascript
width: "100%", // Prozent-Werte. Hier: volle Breite.
width: "100px", // Pixel-Werte
```

### height

Mit*** height*** kannst du die Höhe des Bilde Containers einstellen.


```javascript
height: "auto", // Automatisch an den Inhalt angepasste Höhe.
height: "300px", // Pixel-Werte
```

### backgroundSize

Mit ***backgroundSize*** definierst du die Größe des Bildes im Container.


```javascript
backgroundSize: "cover", // Füllt den Container komplett aus, kann dazu führen, dass das Bild abgeschnitten wird.
backgroundSize: "contain", // Das Bild wird komplett in dem Container angezeigt.
backgroundSize: "50%",
backgroundSize: "auto", // Bild wird in der Originalgröße angezeigt.
backgroundSize: "15px 10px", // Gibt Breite und Höhe in Pixel an.
```

### backgroundColor

Mit ***backgroundColor*** kannst du die Farbe des Hintergrundes bestimmen. Vor allem nützlich, wenn kein Bild angezeigt wird oder für Bilder, die nicht auf die Gesamtgröße angepasst wurden. Es ist auch möglich, den Hintergrund transparent zu machen.


```javascript
 backgroundColor: "#1D8C96", // HEX-Code für Farben
 backgroundColor: "transparent", // für einen transparenten Hintergrund
```

### style

Bei dem*** style*** Parameter kannst du eigene CSS styles hinzufügen.


```javascript
style: "opacity 30%;", // CSS styles
```

<h5>
</h5>