Wie man Bilder in Web-Anwendungen verwendet

Dieses Tutorial beschreibt die Image Verwendung der Komponente in Webanwendungen.

Look & Feel

• Upload - es ist möglich, ein Bild vorzudefinieren, indem man die Taste drückt und ein Bild aus dem Dateisystem auswählt;

• Image alt [ string] - Auch Alt-Tags und Alt-Beschreibungen genannt, ist der Alt-Text der schriftliche Text, der anstelle eines Bildes auf einer Webseite erscheint, wenn das Bild auf dem Bildschirm eines Nutzers nicht geladen werden kann. Dieser Text hilft Bildschirmleseprogrammen, Bilder für sehbehinderte Leser zu beschreiben, und ermöglicht es Suchmaschinen, Ihre Website besser zu durchsuchen und einzustufen;
• Width [ string] - Bildbreite standardmäßig;
• Height [ string] - Bildhöhe standardmäßig;
• Visible [ boolean] - legt fest, ob das Bild sichtbar ist oder nicht;
• Name [ string] - der Name der Komponente;

Verwandte Geschäftsprozesse

Image in HTML ist ein Verweis auf das Bildobjekt selbst. Daher arbeitet Image immer mit Links, und um Bilddaten zu verwenden, müssen Sie einen Link zu ihnen erhalten.

Die folgenden BPs sind für die Verwendung in Webanwendungen vorgeneriert:

• Image Get Properties - ermittelt die Bildeigenschaften:
  • Component ID [ string] - Bezeichner der Komponente;
  • Width [ string] - Bildbreite;
  • Height [ string] - Bildhöhe;
  • Image URL [ string] - Bild-URL-Adresse;
  • Tooltip [ string] - Tooltip-String, der bei Hover angezeigt wird;
  • Visible [ boolean] - definiert, ob das Bild sichtbar ist oder nicht;
  • Loading [ boolean] - setzt das Bild in den Zustand " Laden", wenn true;

• Image Set Properties - setzt alle Eigenschaften des ausgewählten Bildes zurück und setzt stattdessen die angegebenen Eigenschaften:
  • Component ID [ string] - Bezeichner der Komponente;
  • Width [ string] - Bildbreite;
  • Height [ string] - Bildhöhe;
  • Image URL [ string] - Bild-URL-Adresse;;
  • Tooltip [ string] - Tooltip-String, der bei Hover angezeigt wird;
  • Visible [ boolean] - definiert, ob das Bild sichtbar ist oder nicht;
  • Loading [ boolean] - setzt das Bild in den Zustand " Laden", wenn true;

• Image Update Properties - aktualisiert die Bildeigenschaften:
  • Component ID [ string] - Bezeichner der Komponente;
  • Width [ string] - Bildbreite;
  • Height [ string] - Bildhöhe;
  • Image URL [ string] - Bild-URL-Adresse;
  • Tooltip [ string] - Tooltip-String, der bei Hover angezeigt wird;
  • Visible [ boolean] - definiert, ob das Bild sichtbar ist oder nicht;
  • Loading [ boolean] - setzt das Bild in den Zustand " Laden", wenn true;

Verwendungsbeispiel

Betrachten Sie ein Beispiel für das Laden eines Benutzerprofil-Avatars. Das Webinterface besteht aus einem Bild und einer Schaltfläche, die den BP auslöst, und sieht wie folgt aus:

BP startet von onClick Auslöser. Um die Dateien aus dem Dateisystem des Geräts des Benutzers zu holen, wird Select Files wird ein Block verwendet ( Max files = 1, File types = Image). Wenn die Datei erfolgreich ausgewählt wurde, wird ein Array-Element mit index=0 ausgewählt werden.

Das resultierende Dateielement des Files Array muss zur weiteren Verwendung auf den Webanwendungsserver hochgeladen werden ( Server request POST /_files/). Wenn die Anfrage erfolgreich ist, wird das Dateiobjekt am Ausgang des Server request POST /_files/ Blocks wird an den Eingang des Expand file Blocks übergeben, um dessen ID.

Um die URL zu erhalten, müssen Sie die Datei ID nehmen und ihren Wert in eine Zeichenkette umwandeln ( To String). Der relative Dateipfad würde lauten /api/_files//download/. Um also ein Bild hochzuladen, muss der Dateipfad in die Image URL Eigenschaft des Image Update Properties Blocks übergeben werden.

Die veröffentlichte Anwendung ist auf dem unten stehenden Beispiel