07 - Composants UI et Affichage

Une fois traitées par mon service PHP, les images sont prêtes à être affichées avec une esthétique premium dans vos composants Vue.

1. Composant BlogPostCard.vue

C’est ici que le résultat de mon travail sur les images est le plus visible.

• Ratio d’image : Les images traitées conservent un aspect ratio harmonieux.
• Logo & Filigrane : Ils apparaissent discrètement, renforçant l’identité visuelle de Devinsto sur chaque partage social.

2. Prévisualisation dans PostEdit.vue

Lors de l’édition d’un article, j’ai veillé à ce que la prévisualisation soit fluide.

• Si l’image existe déjà, elle est affichée via son URL storage.
• Si l’utilisateur télécharge une nouvelle image, elle remplace la prévisualisation avant même d’être traitée par le serveur (UX Instantanée).

<template>
    <div v-if="previewUrl" class="group relative">
        <img :src="previewUrl" class="border-brand/20 rounded-xl border-2 shadow-lg" />
        <div class="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 transition-opacity group-hover:opacity-100">
            <span class="text-sm font-medium text-white">L'image sera traitée après sauvegarde</span>
        </div>
    </div>
</template>

3. Responsive Design

J’ai configuré le service pour que le filigrane et le logo soient proportionnels à la taille de l’image. Ainsi :

• Sur un mobile, le logo reste lisible mais discret.
• Sur un écran 4K, le logo s’agrandit pour garder sa place de manière équilibrée (8% de la largeur totale).

4. Lazy Loading (Inertia v2)

N’oubliez pas d’utiliser loading="lazy" sur vos balises <img> pour profiter pleinement de l’optimisation de poids que j’ai implémentée dans le service (Qualité 80%).