تظهر صور المركبات كصنف خاص من الأصول حتى يتم دمجها، وفي هذه النقطة تتحول إلى ما يريد كل أصل أن يكون عليه في الواجهة الأمامية: عنوان 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 الموقعة بجانب سجل المركبة، ودع المكونات تتلقى رابط صورة كخاصية عادية. لا يعرف شجرة المكونات وجود API للمركبة؛ فهي تعرض النصوص.
- تبقى مفتاح الواجهة على جانب الخادم، حيث يجب أن يكون
- دقة واحدة لكل مركبة لكل تحديث في الكتالوج، وليس واحدة لكل عرض صفحة
- البنود تبقى غير ذكية، قابلة للاختبار، قابلة للنقل بين الإطارات
تأتي الصور الاستجابة مجانًا
لأن الأبعاد هي معلمات الطلب، فإن srcset هو نفس الرابط على ثلاثة عرضات: طلب 600 و1200 و2000 بكسل، ودع المتصفح يختار. قدم format=webp كإعداد افتراضي؛ اعتمد على PNG فقط عندما ترغب حقًا في تركيب الشفافية في اللوحة أو الطباعة. الفرق في حجم البيانات في شبكة القوائم ليس خفيفًا.
التفاصيل التي تميز التكاملات الجيدة.
- تحميل كل شيء تحت الطية بشكل كسول؛ شبكة قوائم هي حالة نموذجية لـ loading="lazy"
- احتفظ بنسبة العرض في CSS حتى لا يتدفق الشبكة عند وصول الصور
- اكتب نص بديل حقيقي من البيانات التي تمتلكها بالفعل: السنة، العلامة التجارية، النموذج، الطراز، اللون، الزاوية
- احفظ صور المركبات في مخزنك الخاص أو CDN؛ أعد حلها عند تحديث الكتالوج، وليس عند الطلب
- تحقق من مصفوفة ملاحظات الأخطاء في الإجابات. يوضح لك API عندما قام باستبدال بديل، على سبيل المثال، نموذج عام سابق أو لاحق
وظيفة مكون بأكمله
الحالة النهائية مملة، وهذا هو الهدف: مكون VehicleImage يأخذ عنوان URL محلول، وHint عرض، ونص بديل، ويولد علامة صورة مع srcset والتحميل التلقائي. جميع ذكاء المركبة موجود في طبقة البيانات حيث يمكن تخزينها، تسجيلها، واستبدالها. إذا كان مكونك يعرف ما هو VIN، فإن الحدود في المكان الخطأ.
حالات التحميل والأخطاء
حالتان تستحقان اهتمام التصميم قبل الإطلاق. أثناء تحميل صورة، يحافظ هيكل عظمي ثابت النسبة على استقرار البطاقة، ولأن كل مركبة تشحن في إطار مماثل، يعمل نموذج واحد من الظل كبديل لجميع الفهرس. عندما يفشل البحث أو لا تحتوي المركبة على صورة بعد، قم بالرجوع إلى بديل مصمم ومبرند بدلاً من أيقونة صورة مكسورة، وسجل المعرف حتى يكون الفجوة تذكرة بيانات بدلاً من لغز.
المرجع الكامل للمعلمات وشكل الاستجابات موجود في وثائق API. تغطي صفحة API صور المركبات البحث عن طريق VIN، اللوحة، والخطوة البحثية للدقة.
