React टीम दो समस्याओं का सामना उसी दोपहर में करती है: API की एक्सपोज नहीं होनी चाहिए, और एक ग्रिड वाहनों को लोड करते समय झटका नहीं लेना चाहिए। जहाँ आपकी सीक्रेट्स हैं, वहां समाधान करें, क्लाइंट को URL भेजें, और दोनों समस्याएँ गायब हो जाती हैं।
एक क्लाइंट घटक से फेट्च करने पर आपका की ब्राउज़र के डेवटूल्स में खोलने वाले किसी भी व्यक्ति को मिल जाता है। एक रूट हैंडलर, एक सर्वर घटक या अपने बैकएंड में वाहनों को रिज़ॉल्व करें, और ब्राउज़र को केवल पूर्ण छवि यूआरएल ही दिखाई देते हैं।
एक बार समाधान करें, URL नीचे पास करें, ब्राउज़र को कैश करने दें। यहां कुछ चतुराई नहीं होती, और यही बात है।
npm i vehicleimagery, फिर क्लाइंट बनाएं जहाँ आपकी सीक्रेट्स पहले से मौजूद हैं, घटक के अंदर नहीं।
एक VIN, एक नंबर प्लेट या मॉडल और वर्ष डालें। हर कोण के लिए छवि यूआरएल वापस आते हैं।
आपका कार्ड एक स्ट्रिंग लेता है। कोई प्रोवाइडर नहीं, कोई कॉन्टेक्स्ट नहीं, कोई क्लाइंट साइड फेचिंग नहीं, कोई लोडिंग वॉटरफॉल नहीं।
एक फिक्स्ड रेशियो व्रैपर और एक वाइड्थ पैरामीटर जो रेंडर्ड साइज़ के साथ मिलता है, लेआउट शिफ्ट को होने से पहले ही हटा देता है।
बिना भारी मेहनत के वाहन छवियाँ अपने उत्पाद में लाइए। साफ़ दस्तावेज़ीकरण, खुले SDK और तैयार प्लगइन मिनटों में आपके स्टैक से जुड़ जाते हैं, और हमारा स्टेटस पेज लाइव दिखाता है कि API कैसा चल रहा है।
एक वाहन ग्रिड में लेआउट शिफ्ट लगभग हमेशा एक अनसाइज़्ड छवि होती है। कार्ड वास्तव में रेंडर करता है, उस वाइड्थ को रिक्वेस्ट करें, इसे एक फिक्स्ड रेशियो बॉक्स में लपेटें, और ग्रिड पहले पेंट पर ही सेटल हो जाता है, दो बार सेटल नहीं होता।
बहुत से React कोडबेस एक प्लेसहोल्डर इमेज और बाद में इसे सुधारने का वादा लेकर शुरू होते हैं। सुधार आमतौर पर एक कार्ड घटक के अंदर एक क्लाइंट-साइड फेच के रूप में आता है, और यही समस्या शुरू होती है: की एक्सपोज हो जाती है, हर कार्ड अपना अलग रिक्वेस्ट खोलता है, और ग्रिड फिर से फ्लो होता है जब जवाब अलग-अलग समय पर आते हैं। API तेज है, लेकिन पैटर्न गलत है।
वर्जन जो खड़ा रहता है, वह अनग्लैमरस है। वाहनों को वहां रिज़ॉल्व करें जहां आप पहले से ही लिस्टिंग डेटा लोड करते हैं, रिज़ल्टिंग यूआरएल्स को लिस्टिंग ऑब्जेक्ट पर रखें, और कार्ड्स को एक img टैग रेंडर करें जिसकी चौड़ाई उनके लेआउट के साथ मिलती है। ब्राउज़र यूआरएल द्वारा कैश करता है, सीडीएन बाकी का काम संभालता है, और आपकी कंपोनेंट ट्री यह जानने से रुक जाती है कि एक इमेज एपीआई मौजूद है भी।
आप कर सकते हैं, लेकिन नहीं करनी चाहिए। एक क्लाइंट कंपोनेंट ब्राउज़र में चलता है, इसलिए की ब्राउज़र के साथ यात्रा करती है। एक रूट हैंडलर, एक सर्वर कंपोनेंट या अपने बैकएंड पर रिज़ॉल्व करें और प्रॉप्स के रूप में URL पास करें।
हाँ, और यह सबसे साफ़ फिट है। लिस्टिंग लोड करने वाले सर्वर कंपोनेंट के अंदर रिज़ॉल्व करें, फिर यूआरएल को सीधे रेंडर करें। इंटीग्रेशन के बारे में कुछ भी क्लाइंट बंडल तक नहीं पहुंचता।
नहीं, और जानबूझकर। npm पैकेज फ्रेमवर्क एग्नॉस्टिक है और URL वापस करता है। एक वाहन इमेज एक img टैग है, और इसे हमारी नियंत्रण में एक घटक में लपेटना सिर्फ़ आपकी डिज़ाइन सिस्टम के रास्ते में आएगा।
छवि को एक फिक्स्ड एस्पेक्ट रेशियो कंटेनर दें और वह वाइड्थ रिक्वेस्ट करें जो आप रेंडर करते हैं। क्योंकि फ्रेमिंग सभी वाहनों में समान है, एक रेशियो पूरे ग्रिड के लिए काम करता है।
एक न्यूट्रल प्लेसहोल्डर जो उसी एस्पेक्ट रेशियो पर है। क्योंकि यूआरएल रेंडर से पहले ही ज्ञात होता है, छवियाँ आमतौर पर एक दृश्य प्लेसहोल्डर चरण के बिना लोड होती हैं।
हाँ। ये URL साधारण HTTPS इमेज URL हैं, इसलिए इमेज कंपोनेंट उन्हें सीधे कन्स्यूम करता है। अपने बैकएंड पर रिज़ॉल्व करें, जैसे आप वेब के लिए करते हैं।
बताएं कि आपका लिस्टिंग डेटा कैसा दिखता है और आपके कार्ड किस साइज का उपयोग करते हैं। हम इमेज यूआरएल्स वापस आते हैं जो आपकी कंपोनेंट्स में ड्रॉप करने के लिए तैयार हैं।
