Hoe afbeeldingen gebruiken in webtoepassingen

Deze tutorial beschrijft het Image componentgebruik in webtoepassingen.

Look & Feel

• Upload - het is mogelijk om een afbeelding vooraf te definiëren door op de knop te drukken en een afbeelding uit het bestandssysteem te selecteren;

• Image alt [string] - alt-tekst is de geschreven tekst die in plaats van een afbeelding op een webpagina verschijnt als de afbeelding niet wordt geladen op het scherm van een gebruiker. Deze tekst helpt schermlezers om afbeeldingen te beschrijven voor lezers met een visuele beperking en stelt zoekmachines in staat om uw website beter te crawlen en te rangschikken;
• Width [string] - standaard beeldbreedte;
• Height [string] - standaard beeldhoogte;
• Visible [boolean] - bepaalt of de afbeelding zichtbaar is of niet;
• Name [string] - de naam van de component;

Gerelateerde bedrijfsprocessen

Image in HTML is een verwijzing naar het image object zelf. Daarom werkt Image altijd met links en, om afbeeldingsgegevens te gebruiken, moet je er een link naar krijgen.

De volgende BPs zijn vooraf gegenereerd voor gebruik in webtoepassingen:

• Image Get Properties - krijgt afbeeldingseigenschappen:
  • Component ID [string] - identifier van het component;
  • Width [string] - beeldbreedte;
  • Height [string] - beeldhoogte;
  • Image URL [string] - image URL-adres;
  • Tooltip [string] - tooltip string die getoond moet worden bij hover;
  • Visible [boolean] - bepaalt of de afbeelding zichtbaar is of niet;
  • Loading [boolean] - zet de afbeelding in "loading" status als true;

• Image Set Properties - stelt alle eigenschappen van de geselecteerde afbeelding opnieuw in en stelt in plaats daarvan de gegeven eigenschappen in:
  • Component ID [string] - identifier van de component;
  • Width [string] - beeldbreedte;
  • Height [string] - beeldhoogte;
  • Image URL [string] - image URL-adres;;
  • Tooltip [string] - tooltip string te tonen bij hover;
  • Visible [boolean] - bepaalt of de afbeelding zichtbaar is of niet;
  • Loading [boolean] - zet de afbeelding in "loading" status als true;

• Image Update Properties - beeldeigenschappen bijwerken:
  • Component ID [string] - identifier van de component;
  • Width [string] - beeldbreedte;
  • Height [string] - beeldhoogte;
  • Image URL [string] - image URL-adres;
  • Tooltip [string] - tooltip string die getoond moet worden bij hover;
  • Visible [boolean] - bepaalt of de afbeelding zichtbaar is of niet;
  • Loading [boolean] - zet de afbeelding in "loading" status als true;

Gebruiksvoorbeeld

Beschouw een voorbeeld van het laden van een avatar van een gebruikersprofiel. De webinterface bestaat uit een afbeelding en een knop die de BP activeert, en ziet er zo uit:

BP start vanaf onClick trigger. Om de bestanden uit het bestandssysteem van het apparaat van de gebruiker te halen wordt een Select Files wordt een blok gebruikt (Max files = 1, File types = Image). Als het bestand met succes is gekozen wordt array-element met index=0 geselecteerd.

Het resulterende bestandselement van de Files array moet worden geüpload naar de webapplicatieserver voor verder gebruik (Server request POST /_files/). Als het verzoek succesvol is, wordt het bestandsobject aan de uitgang van het Server request POST /_files/ blok doorgegeven aan de ingang van het Expand file blok om zijn ID.

Om de URL te krijgen, moet het bestand ID en de waarde ervan converteren naar een string (To String). Het relatieve bestandspad zou zijn /api/_files/<ID>/download/. Dus, om een afbeelding te uploaden, moet het bestandspad worden doorgegeven in de Image URL eigenschap van het Image Update Properties blok.

Gepubliceerde toepassing is op het onderstaande voorbeeld