Principes de base de Blazor : gestion dynamique des images

Nous apprendrons comment restituer des images statiques et dynamiques dans les applications Blazor.

La gestion des images est l’une des tâches fondamentales de tout framework Web. Blazor nous propose deux options différentes sur la façon de rendre les images.

On peut utiliser chemins d’images statiques, ce qui signifie que nous montrons toujours la même image, quoi qu’il arrive. Ou nous pouvons utiliser chemins d’images dynamiquesce qui signifie que nous utilisons une variable C# et, en fonction de son contenu, une image différente est rendue dans le composant Blazor.

Images statiques

Rendus d’abord une image statique. Il n’y a pas de bien ou de mal, mais je place généralement mes images dans le wwwroot dossier puisque ce dossier est automatiquement accessible depuis le navigateur.

Le dossier contient déjà CSS et Javascript fichiers, et nous pouvons ajouter notre fichiers images à ce dossier racine. Je crée toujours une structure de dossiers qui a du sens pour mes projets. Dans ce cas simple, un dossier images dans le wwwroot le dossier est tout ce dont nous avons besoin.

J’ai placé trois images dans le chemin suivant :

• images/
  • hamburger.jpg
  • pizza.jpg
  • salade.jpg

Ensuite, nous souhaitons restituer les images dans le cadre d’un modèle de composant Blazor. C’est très simple. Tout ce que nous avons à faire est de définir la propriété source d’un img élément au chemin relatif dans le wwwroot dossier.

Jetez un œil au code suivant :

<img style="width: 300px" src="images/pizza.jpg" />
<img style="width: 300px" src="images/burger.jpg" />
<img style="width: 300px" src="images/salad.jpg" />

Comme vous pouvez le constater, aucune magie n’est impliquée. C’est tout HTML standard. La chose la plus importante à savoir est que les chemins sont relatifs et commencent au wwwroot dossier.

Les images rendues ressemblent à ceci :

Rendu dynamique des images

Bien que le rendu d’images statiques soit la base, cela devient plus intéressant lorsque l’on travaille avec des images rendues dynamiquement.

Disons que nous avons déjà faim d’après l’exemple ci-dessus. Je veux savoir quel est ton plat préféré. Je vous propose une liste d’options de menu et vous devez me dire quel est votre plat préféré.

Nous réutilisons les trois mêmes images placées à l’intérieur du wwwroot dossier dans un images sous-dossier.

Mais cette fois, nous utilisons une implémentation de composant plus avancée pour résoudre le problème décrit ci-dessus. Cependant, grâce à l’utilisation de Blazor, ce ne sera pas difficile.

Commençons par implémenter le bloc de code du composant. Comme toujours, il contient le code C# dont nous avons besoin pour rendre ce composant interactif.

@code {
    public string? FavoriteFoodImageSource { get; set; }

    public void OnFoodClicked(string food)
    {
        FavoriteFoodImageSource = $"images/{food}.jpg";
    }
}

Nous avons deux éléments de code.

Tout d’abord, nous définissons une propriété publique appelée FavoriteFoodImageSource de type string?. Il contiendra le chemin d’accès à l’image que nous voulons restituer comme aliment préféré.

Ensuite, nous avons un OnFoodClicked méthode avec un seul string paramètre nommé food. Nous souhaitons appeler cette méthode lorsque l’utilisateur sélectionne un menu. Ce faisant, ils le choisissent comme leur aliment préféré.

Ensuite, nous implémentons le code du modèle :

<p>Please select your preferred food:</p>

<div style="display: flex;">
    <div @onclick=@(() => OnFoodClicked("pizza"))>
        <img style="width: 300px; margin-right: 20px;" src="/images/pizza.jpg" />
    </div>
    <div @onclick=@(() => OnFoodClicked("burger"))>
        <img style="width: 300px; margin-right: 20px;" src="/images/burger.jpg" />
    </div>
    <div @onclick=@(() => OnFoodClicked("salad"))>
        <img style="width: 300px; margin-right: 20px;" src="/images/salad.jpg" />
    </div>
</div>

Dans le code modèle de notre composant Blazor, nous demandons à l’utilisateur de sélectionner son aliment préféré avec un texte statique rendu par un p élément.

Ensuite, nous rendons les trois images pour chaque option de menu. Dans cette partie de l’implémentation, nous utilisons le rendu d’image statique car nous proposons toujours les trois mêmes options.

Indice: Si vous souhaitez passer au niveau supérieur, la sélection des menus pourrait également être implémentée à l’aide du rendu d’image dynamique. Par exemple, lorsque vous souhaitez disposer de 10 options de menu dans l’application Web, laissez l’utilisateur choisir parmi sept options de menu. Vous pouvez implémenter un code qui sélectionne de manière aléatoire sept options sur 10 disponibles.

Nous enregistrons également le OnFoodClicked méthode comme gestionnaire de clics pour le div envelopper nos éléments d’image. Nous fournissons une chaîne identifiant l’aliment que nous souhaitons définir comme aliment préféré.

Pour compléter l’exemple, nous devons restituer dynamiquement l’aliment préféré sélectionné par l’utilisateur.

Nous utilisons le code de modèle suivant :

@if (FavoriteFoodImageSource is not null)
{
    <div style="margin-bottom: 40px;">
        <p>This is your favorite food:</p>
        <img style="width: 300px" src="@FavoriteFoodImageSource" />
    </div>
}

Nous utilisons d’abord un instruction conditionnelle pour afficher uniquement cette partie du modèle de composant lorsque l’utilisateur a sélectionné un aliment préféré. Lorsque nous démarrons l’application Web pour la première fois, le FavoriteFoodImageSource la variable est initialisée avec nullet, par conséquent, nous ne voulons pas restituer cette partie du modèle de composant.

Au sein du if clause, nous rendons une image en utilisant un régulier img Élément HTML. La différence est que nous ne fournissons pas de chaîne littérale statique pour la propriété source, mais que nous faisons référence à la propriété source. FavoriteFoodImageSource propriété du bloc de code C# du composant.

N’oubliez pas que nous déclarons la variable dans le bloc de code du composant Blazor. Il sera initialisé avec null au démarrage. Chaque fois que l’utilisateur clique sur l’une des options du menu, le OnFoodClicked la méthode sera appelée, et la valeur du FavoriteFoodImageSource la propriété sera définie en conséquence.

Indice: Depuis le OnFoodClicked méthode sera enregistrée en tant que gestionnaire d’événements, nous n’avons pas besoin d’appeler manuellement le StateHasChanged méthode. Le framework Blazor suppose qu’un gestionnaire d’événements apportera des modifications au modèle de composant et, par conséquent, un appel internalisé au StateHasChanged La méthode garantira que le composant est restitué.

Lorsque nous lançons l’application, le composant ressemble à ceci.

Il affiche trois options de menu différentes et demande à l’utilisateur son aliment préféré.

Lorsque l’utilisateur clique sur l’une des options (je choisirais toujours la pizza), la condition est évaluée comme vraie et l’image de l’aliment préféré sera rendue dynamiquement.

Conclusion

Le rendu d’image est l’une des tâches fondamentales de tout framework Web. Blazor nous fournit le wwwroot dossier accessible par le navigateur et une API simple pour définir la propriété source d’un élément d’image HTML.

La différence entre le rendu d’image statique et dynamique réside dans la manière dont nous fournissons le chemin d’accès à l’image à l’élément d’image HTML.

Pour les images statiques, nous fournissons une chaîne littérale. Pour les images rendues dynamiquement, nous utilisons une variable C# à laquelle nous attribuons une valeur contenant le chemin relatif vers l’image dans le wwwroot dossier.

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Si vous souhaitez en savoir plus sur le développement de Blazor, vous pouvez regarder mon cours intensif Blazor gratuit sur YouTube. Et restez à l’écoute du blog Telerik pour en savoir plus Les bases du Blazor.