Les images de véhicules semblent appartenir à une classe d'actifs spéciale jusqu'à ce que vous les intégriez. Elles deviennent alors ce que tout frontend souhaite pour chaque actif: une URL avec des paramètres. Cet article présente le modèle d'intégration pour les frameworks de composants. Les exemples sont en React, et le modèle est identique dans Vue, Svelte ou tout autre framework qui rend une balise <img>
La forme de l'API
Chaque image se trouve à un chemin prévisible: marque, modèle, année, variante, finition, puis la vue. Les options voyagent en tant que paramètres de requête. Une requête comme /api/Abarth/124_Spider_Abarth/2016/Basis/base/front_left?format=webp&width=1200 retourne du JSON avec des métadonnées et une image_url signée prête pour une balise d'image. L'authentification est un seul en-tête x-api-key; il existe également un package npm (npm install vehicleimagery) qui enveloppe ces appels.
Règle numéro un: résoudre côté serveur, rendre côté client
La seule décision architecturale qui compte: ne pas appeler l'API depuis le navigateur. Votre clé API ne doit pas figurer dans le code client, et l'étape de résolution (identifiant en entrée, véhicule en sortie) doit se trouver là où vivent vos données. Résolvez le véhicule dans votre backend ou au moment de la construction, stockez le chemin et l'URL signée à côté de l'enregistrement du véhicule, et laissez les composants recevoir une URL d'image en tant que propriété ordinaire. L'arborescence des composants ne connaît jamais l'existence d'une API de véhicule; elle rend des chaînes de caractères.
- La clé API reste côté serveur, où elle doit être.
- Une seule résolution par véhicule par mise à jour de catalogue, pas une par page vue
- Les composants restent simples, testables et portables entre frameworks
Les images réactives sont gratuites
Parce que les dimensions sont des paramètres de requête, srcset est simplement la même URL à trois largeurs: demandez des variantes de 600, 1200 et 2000 pixels et laissez le navigateur choisir. Servez format=webp par défaut; reportez-vous à PNG uniquement lorsque vous composez réellement sur la transparence dans un canvas ou une impression. La différence de charge utile sur une grille de listings n'est pas subtile.
Les détails qui distinguent les bonnes intégrations.
- Charger paresseusement tout ce qui est en dessous du pli; une grille de listes est le cas d'école loading="lazy"
- Réservez le rapport d'aspect en CSS afin que la grille ne se reflue pas lorsque les images arrivent
- Rédigez un texte alternatif réel à partir des données que vous détenez déjà: année, marque, modèle, finition, couleur, angle
- Mettez en cache les URL des images dans votre propre magasin ou CDN; résolvez à la mise à jour du catalogue, pas à la demande
- Consultez le tableau des erreurs dans les réponses. L'API vous indique quand elle a substitué une image de secours, par exemple une année-modèle voisine
Le rôle entier d'un composant
L'état final est ennuyeux, ce qui est le but: un composant VehicleImage qui prend une URL résolue, une indication de largeur et un texte alternatif, et rend une balise d'image avec srcset et chargement paresseux. Toute l'intelligence des véhicules vit dans la couche de données où elle peut être mise en cache, enregistrée et échangée. Si votre composant connaît ce qu'est un VIN, la limite est mal placée.
États de chargement et d'erreur
Deux états méritent une attention particulière avant le lancement. Pendant qu'une image se charge, un squelette de ratio fixe maintient la carte stable, et comme chaque véhicule est expédié dans un encadrement identique, un seul modèle de silhouette fait l'affaire pour tout le catalogue. En cas d'échec de recherche ou si un véhicule n'a pas encore d'image, utilisez un modèle de substitution délibérément marqué plutôt qu'une icône d'image cassée, et enregistrez l'identifiant pour que la lacune devienne un ticket de données plutôt qu'un mystère.
La référence complète des paramètres et des formes de réponse se trouve dans la documentation API; la page de l'API d'images de véhicules couvre la recherche par VIN, plaque et étape de résolution
