वाहन चित्र एक विशेष संपत्ति वर्ग की तरह दिखते हैं जब तक कि आप उन्हें एकीकृत नहीं करते, जिसके बाद वे एक URL के रूप में सामने आते हैं जिसमें पैरामीटर होते हैं जो एक फ्रंटएंड हर संपत्ति को चाहता है। यह लेख घटक फ्रेमवर्क के लिए एकीकरण पैटर्न पर चर्चा करता है। उदाहरण रिएक्ट में पढ़े जाते हैं, और पैटर्न व्यू, स्वेल्टे या किसी भी अन्य चीज में समान है जो एक <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 तीन चौड़ाइयों में वही URL है: 600, 1200 और 2000 पिक्सेल के वैरिएंट अनुरोध करें और ब्राउज़र को चुनने दें। डिफ़ॉल्ट के रूप में format=webp सर्व करें; केवल तब PNG पर फॉलबैक करें जब आप वास्तव में कैनवास या प्रिंट में पारदर्शिता के ऊपर कॉम्पोजिट करें। लिस्टिंग ग्रिड पर पेलोड का अंतर स्पष्ट है।
उन विवरण जो अच्छे एकीकरण को अलग करते हैं
- फोल्ड के नीचे सब कुछ लेज़ी-लोड करें; एक लिस्टिंग्स ग्रिड टेक्स्टबुक लॉडिंग="लेज़ी" केस है
- CSS में एस्पेक्ट रेशियो को रिजर्व करें ताकि छवियां आती हैं, ग्रिड फिर से फ्लो न हो
- वर्ष, निर्माता, मॉडल, ट्रिम, रंग, कोण के डेटा से वास्तविक alt टेक्स्ट लिखें
- अपने स्टोर या CDN में छवि URL कैश करें; कैटलॉग अपडेट पर पुनः रिज़ॉल्व करें, रिक्वेस्ट पर नहीं
- जवाबों में errornotes array को देखें। API आपको बताता है जब यह एक फॉलबैक का उपयोग करता है, उदाहरण के लिए एक पड़ोसी मॉडल वर्ष।
एक कंपोनेंट का पूरा काम
अंतिम स्थिति बोरिंग है, जो कि मुद्दा है: एक VehicleImage घटक जो एक रिज़ॉल्व्ड URL, एक वIDTH हिंट और ALT टेक्स्ट लेता है, और एक IMAGE टैग को srcset और lazy loading के साथ रेंडर करता है। सभी वाहन इंटेलिजेंस डेटा लेयर में रहता है जहाँ इसे कैश, लॉग और स्वैप किया जा सकता है। अगर आपका घटक जानता है कि एक VIN क्या है, तो सीमा गलत जगह पर है।
लोडिंग और एरर स्टेट्स
लॉन्च से पहले दो स्थितियों को डिजाइन ध्यान देने की जरूरत है। जब एक इमेज लोड हो रही है, तो एक फिक्स्ड-रेशियो स्केलेटन कार्ड को स्थिर रखता है, और क्योंकि हर वाहन एक ही फ्रेमिंग में शिप होता है, तो एक सिल्हूट प्लेसहोल्डर पूरे कैटलॉग के लिए काम करता है। जब एक लुकअप फेल हो जाता है या एक वाहन का कोई इमेज नहीं है, तो एक ब्रांडेड प्लेसहोल्डर पर फॉलबैक करें, जो एक टूटे हुए इमेज आइकन के बजाय है, और पहचानकर्ता को लॉग करें ताकि गैप एक डेटा टिकट हो, न कि एक रहस्य।
पूर्ण पैरामीटर रेफरेंस और रिस्पॉन्स शेप्स API दस्तावेज़ में हैं; वाहन इमेज API पेज VIN, प्लेट और रिज़ॉल्यूशन स्टेप के लिए लुकअप को कवर करता है।
