Comment utiliser les images dans les applications web

Ce tutoriel décrit l'utilisation du composant Image utilisation du composant dans les applications Web.

Look & Feel

• Upload - il est possible de prédéfinir une image en appuyant sur le bouton et en sélectionnant une image dans le système de fichiers ;

• Image alt [ string] - également appelé balises alt et descriptions alt, le texte alt est la copie écrite qui apparaît à la place d'une image sur une page Web si l'image ne parvient pas à se charger sur l'écran de l'utilisateur. Ce texte aide les outils de lecture d'écran à décrire les images aux lecteurs malvoyants et permet aux moteurs de recherche de mieux explorer et classer votre site Web ;
• Width [ string] - largeur de l'image par défaut ;
• Height [ string] - hauteur de l'image par défaut ;
• Visible [ boolean] - définit si l'image est visible ou non ;
• Name [ string] - le nom du composant ;

Processus d'affaires connexes

L'image en HTML est une référence à l'objet image lui-même. Par conséquent, Image fonctionne toujours avec des liens et, pour utiliser les données de l'image, vous devez obtenir un lien vers celle-ci.

Les éléments suivants BPs sont pré-générés pour l'utilisation des applications web :

• Image Get Properties - récupère les propriétés de l'image :
  • Component ID [ string] - identifiant du composant ;
  • Width [ string] - largeur de l'image ;
  • Height [ string] - hauteur de l'image ;
  • Image URL [ string] - adresse URL de l'image ;
  • Tooltip [ string] - chaîne d'info-bulle à afficher au survol ;
  • Visible [ boolean] - définit si l'image est visible ou non ;
  • Loading [ boolean] - met l'image en état de " chargement" si true;

• Image Set Properties - réinitialise toutes les propriétés de l'image sélectionnée et définit celles qui sont données à la place :
  • Component ID [ string] - identifiant du composant ;
  • Width [ string] - largeur de l'image ;
  • Height [ string] - hauteur de l'image ;
  • Image URL [ string] - adresse URL de l'image; ;
  • Tooltip [ string] - chaîne d'info-bulle à afficher au survol ;
  • Visible [ boolean] - définit si l'image est visible ou non ;
  • Loading [ boolean] - met l'image en état de " chargement" si true;

• Image Update Properties - met à jour les propriétés de l'image :
  • Component ID [ string] - identifiant du composant ;
  • Width [ string] - largeur de l'image ;
  • Height [ string] - hauteur de l'image ;
  • Image URL [ string] - adresse URL de l'image ;
  • Tooltip [ string] - chaîne d'info-bulle à afficher au survol ;
  • Visible [ boolean] - définit si l'image est visible ou non ;
  • Loading [ boolean] - met l'image en état de " chargement" si true;

Exemple d'utilisation

Prenons un exemple de chargement d'un avatar de profil d'utilisateur. L'interface web se compose d'une image et d'un bouton qui déclenche la BP, et ressemble à ceci :

BP démarre à partir de onClick déclencheur. Pour prélever les fichiers dans le système de fichiers de l'appareil de l'utilisateur, le bloc Select Files est utilisé ( Max files = 1, File types = Image). Si le fichier est sélectionné avec succès, l'élément de tableau avec index=0 est sélectionné.

L'élément de fichier résultant du Files array doit être téléchargé sur le serveur de l'application web pour une utilisation ultérieure ( Server request POST /_files/ ). Si la requête est réussie, l'objet fichier à la sortie du bloc Server request POST /_files/ est transmis à l'entrée du bloc Expand file pour obtenir son ID.

Pour obtenir l'URL, vous devez prendre le fichier ID et convertir sa valeur en une chaîne de caractères ( To String). Le chemin d'accès relatif au fichier serait /api/_files//download/. Ainsi, pour télécharger une image, le chemin du fichier doit être passé dans la propriété Image URL du bloc Image Update Properties bloc.

L'application publiée est sur l'exemple ci-dessous