تظهر صور المركبات مثل فئة أصول خاصة حتى تقوم بتكاملها، عندها تتحول إلى ما تريد الواجهة الأمامية أن يكون كل أصل: عنوان URL مع معلمات. يسير هذا المقال عبر نمط التكامل لأطر المكونات. يقرأ الأمثلة ك React، والنمط هو نفسه في Vue، Svelte أو أي شيء آخر يقوم برسم علامة <img>.
شكل API
توجد كل صورة في مسار متوقع: العلامة التجارية، النموذج، السنة، التكوين، الطراز، ثم الرؤية. تسافر الخيارات كمتغيرات استعلام. طلب مثل /api/Abarth/124_Spider_Abarth/2016/Basis/base/front_left?format=webp&width=1200 يعيد JSON يحتوي على بيانات وصفية و image_url مع توقيع جاهز لعلامة الصورة. التحقق من الهوية هو رأس واحد x-api-key؛ هناك أيضًا حزمة npm (npm install vehicleimagery) تغطي هذه المكالمة.
القاعدة الأولى: حل على جانب الخادم، عرض على جانب العميل
القرار المعماري الوحيد الذي يهم: لا تدع API من المتصفح. مفتاح API الخاص بك لا ينتمي إلى كود العميل، والخطوة التي يتم فيها تحديد المركبة (معرف في، مركبة في الخارج) تنتمي إلى المكان الذي توجد فيه بياناتك. قم بتحديد المركبة في الخلفية الخاصة بك أو في وقت البناء، وقم بتخزين المسار وURL الموقعة بجانب سجل المركبة، ودع المكونات تستقبل URL الصورة كخاصية عادية. لا يعرف شجرة المكونات وجود API للمركبات؛ إنها تعرض النصوص.
- تبقى مفتاح الواجهة على الجانب الخادم، حيث يجب أن يكون
- دقة واحدة لكل مركبة لكل تحديث في الكتالوج، وليس واحدة لكل عرض صفحة
- البنية تحتية تبقى غبية، قابلة للاختبار، وقابلة للنقل بين الإطارات.
تأتي الصور الاستجابة مجانًا
لأن الأبعاد هي معلمات الطلب، فإن srcset هو نفس الرابط على ثلاثة عرضات: اطلب عرضات 600 و1200 و2000 بكسل ودع المتصفح يختار. قدم format=webp كإعداد افتراضي؛ اعتمد على PNG فقط عندما ترغب حقًا في تركيب الشفافية في اللوحة أو الطباعة. الفرق في حجم البيانات على شبكة قوائم ليست خفيفة.
التفاصيل التي تميز التكاملات الجيدة.
- تحميل كل شيء تحت الطية بشكل كسول؛ شبكة القوائم هي حالة نموذجية لـ loading="lazy"
- احفظ نسبة العرض إلى الارتفاع في CSS حتى لا يتم إعادة تدفق الشبكة عند وصول الصور
- اكتب نص بديل حقيقي من البيانات التي تمتلكها بالفعل: السنة، العلامة التجارية، النموذج، التجهيز، اللون، الزاوية
- احفظ عنوان URL صور في مخزنك الخاص أو CDN؛ أعيد تحديده عند تحديث الكتالوج، وليس عند الطلب
- تحقق من مصفوفة ملاحظات الأخطاء في الردود. يوضح لك API عندما قام باستبدال بديل، على سبيل المثال، نموذج عام مجاور
وظيفة مكون بأكملها
الحالة النهائية مملّة، وهذا هو الهدف: مكون VehicleImage يأخذ عنوان URL محدد، وإشارة إلى العرض ونص بديل، ويولد علامة صورة مع srcset والتحميل التلقائي. جميع معلومات المركبة تعيش في طبقة البيانات حيث يمكن تخزينها، تسجيلها واستبدالها. إذا كان مكونك يعرف ما هو VIN، فإن الحدود في المكان الخطأ.
حالات التحميل والخطأ
يستحقان حالة التصميم الانتباه قبل الإطلاق. بينما يتم تحميل الصورة، يحافظ هيكل عظمي ثابت النسبة على استقرار البطاقة، ولأن كل مركبة تشحن في إطار متطابق، يعمل نموذج واحد من الظل كبديل لجميع الفهرس. عندما يفشل البحث أو لا تحتوي المركبة على صورة بعد، قم بالرجوع إلى بديل مصمم ومبرند بدلاً من رمز صورة مكسورة، وسجل المعرف حتى يكون الفجوة تذكرة بيانات بدلاً من لغز.
المرجع الكامل للمعاملات وشكل الإجابات موجود في وثائق API. الصفحة API صور المركبات تغطي البحث عن VIN، اللوحة، والخطوة البحثية لتحديد الدقة.
