Comment facilement afficher des images par URL avec Kendo UI Builder

Avec Kendo UI Builder, il est facile de créer des composants personnalisés pour présenter rapidement des données dans votre application. Dans cet article, découvrez comment afficher des images à partir d'une URL stockée dans des données.

Lors de la création d'applications, vous devrez peut-être afficher une image à partir d'une URL stockée dans des données. Imaginez ce scénario: Vous devez afficher un nom de destination de voyage et son image associée, et les deux sont disponibles à partir de données JSON, sous la forme d'une chaîne pour le nom de destination et d'une URL d'image pour l'image. Dans cet article, nous verrons comment utiliser Kendo UI Builder pour créer facilement un composant permettant de restituer des images à partir d'une URL extraite d'une source de données.

Configuration initiale

ici dans le dossier des composants.

Suivez les étapes décrites dans la première publication de cette série pour installer ce modèle dans votre application cible. Notez que l'exemple est spécifique au framework Angular (il n'est pas applicable au framework AngularJS).

Mise en route

Le composant possède des propriétés qui vous permettent de configurer le modèle de données à utiliser et quel champ de celui-ci model contient l'URL de l'image (il s'agit du champ des données JSON qui ont l'URL de l'image). Si vous le souhaitez, vous pouvez configurer le titre de l'image, qui sera utilisé comme attribut title de la balise img.

Introduction aux composants personnalisés pour Kendo UI Builder

Création de composants personnalisés pour Kendo UI Builder

Obtenir des données provenant de sources de données est similaire à la publication, Affichage de métriques de périphériques IoT avec Kendo UI Builder

Vous pouvez également consulter cet article sur Composants personnalisés du générateur de Kendo UI à valeur unique et à valeurs multiples (ce composant est un composant à valeur unique)

J'espère que vous trouverez ce composant utile en l'état. Cependant, il est facile de l'adapter à vos besoins. Par exemple, le composant est actuellement implémenté pour une URL d'image absolue dans les données JSON. Dans certains cas, le champ URL peut être relatif. Il serait relativement facile d'adapter ce composant pour prendre une propriété de chemin de base qui serait ajoutée au champ URL.

Dans un prochain article, nous verrons comment combiner ce composant et quelques composants à venir pour créer une page de destination. Comme d'habitude, restez à l'écoute.

Catch Up sur le Kendo UI Builder

Si vous avez sauté dans cette série au milieu et que vous voulez commencer depuis le début, vous pouvez trouver les articles précédents: [19659025] Introduction aux modèles de Kendo UI Builder

Dans les coulisses des modèles de Kendo UI Builder

Traitement des événements dans les modèles Kendo UI Builder

Modèles dans les modèles Kendo UI Builder

Introduction aux composants personnalisés pour Kendo UI Builder

Création de composants personnalisés pour Kendo UI Builder à partir de composants angulaires

Création d'un composant de cotation personnalisé avec Kendo UI Builder

Affichage de métriques à partir de périphériques IoT avec Kendo UI Builder

Composants personnalisés Kendo UI ou Kost

Comment créer des vues personnalisées à partir de Y nos données avec Kendo UI Builder