lux‐image v14 - IHK-GfI/lux-components GitHub Wiki

LUX-Image

Beispielbild LUX-Image

Overview / API

Allgemein

Name Beschreibung
import LuxIconModule
selector lux-image

@Input

Name Typ Beschreibung
luxImageSrc string Pfad zur Bild-Datei, wenn es eine lokale Datei ist, muss das Bild unter dem Ordner /assets liegen. Beispiel: luxImageSrc="/assets/svgs/beispiel.svg"
luxImageWidth string Bestimmt die Breite des Bildes, hier können alle (CSS) bekannten Größen eingegeben werden. Beispiel: luxImageWidth="100%", luxImageWidth="10em", luxImageWidth="100px"
luxImageHeight boolean Bestimmt die Höhe des Bildes, hier können alle (CSS) bekannten Größen eingegeben werden. Beispiel: luxImageHeight="100%", luxImageHeight="10em", luxImageHeight="100px"
luxRawSrc boolean Deaktiviert wenn "true" jegliche Bearbeitung der luxImageSrc durch diese Component. Dadurch sind relativ liegende Image-Links erreichbar (z.B. /fb/test.png).
luxAlt string Eine Bildbeschreibung.

Beispiele

1. Pixel-Größen

Beispielbild 01

Html

<div fxLayout="row" fxLayoutWrap>
  <lux-image
    luxImageSrc="assets/svg/android.svg"
    luxImageWidth="10px"
    luxImageHeight="20px"
    fxFlex="0 0 auto"
  ></lux-image>
  <lux-image
    luxImageSrc="assets/svg/android.svg"
    luxImageWidth="40px"
    luxImageHeight="40px"
    fxFlex="0 0 auto"
  ></lux-image>
  <lux-image
    luxImageSrc="assets/svg/android.svg"
    luxImageWidth="80px"
    luxImageHeight="80px"
    fxFlex="0 0 auto"
  ></lux-image>
  <lux-image
    luxImageSrc="assets/svg/android.svg"
    luxImageWidth="100px"
    luxImageHeight="150px"
    fxFlex="0 0 auto"
  ></lux-image>
  <lux-image
    luxImageSrc="assets/svg/android.svg"
    luxImageWidth="200px"
    luxImageHeight="200px"
    fxFlex="0 0 auto"
  ></lux-image>
</div>

2. Prozent-Größen

Beispielbild 02

Html

<lux-image
  luxImageSrc="assets/svg/svg2009.svg"
  luxImageWidth="100%"
  luxImageHeight="100%"
></lux-image>

3. Raw Source

Html

<lux-image [luxRawSrc]="true" luxImageSrc="/fb/myImage.png"></lux-image>
⚠️ **GitHub.com Fallback** ⚠️