"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > अपने कोड में अनस्प्लैश इमेज का उपयोग कैसे करें

अपने कोड में अनस्प्लैश इमेज का उपयोग कैसे करें

2024-11-02 को प्रकाशित
ब्राउज़ करें:830

एक नए SaaS प्रोजेक्ट पर काम कर रहे एक डेवलपर के रूप में, मुझे कुछ अनस्प्लैश छवियों को सीधे उनके URL के माध्यम से लिंक करने की आवश्यकता थी।
प्रारंभ में, मुझे https://source.unsplash.com/ API के उपयोग की अनुशंसा करने वाला एक लेख (लिंक) मिला। हालाँकि, यह विधि अब काम नहीं करती है, और केवल यूआरएल फ़ील्ड से लिंक कॉपी करने से एम्बेडिंग के लिए आवश्यक प्रत्यक्ष छवि यूआरएल प्रदान नहीं होता है।

https://unsplash.com/photos/a-digital-election-of-the-letter-k-CnbzJXw5Hx4
How to use Unsplash Images in your code

छवि URL अनप्लैश करें

अगला विकल्प जो मैंने आज़माया वह छवि यूआरएल पर राइट-क्लिक करके उसे कॉपी करना था। हालाँकि, यह URL अनावश्यक पैरामीटरों से भरा हुआ था जिनकी मुझे आवश्यकता नहीं थी, जिसके लिए हर बार मैन्युअल निष्कासन की आवश्यकता होती थी। उदाहरण के लिए:

https://images.unsplash.com/photo-1725610588086-b9e38da987f7?q=80&w=3500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA==

एक आलसी डेवलपर के रूप में जो दक्षता को महत्व देता है, मुझे यह प्रक्रिया निराशाजनक लगी। मैं हर बार किसी छवि का उपयोग करने के लिए URL को मैन्युअल रूप से साफ़ नहीं करना चाहता था।

लाइटबल्ब क्षण: मेरा पहला क्रोम एक्सटेंशन बनाना

इसलिए, इसे मैन्युअल रूप से करने में बहुत अधिक समय बर्बाद करने के बाद, मैंने वही किया जो दोहराए जाने वाले कार्यों से घृणा करने वाला कोई भी आलसी डेवलपर करेगा—मैंने एक क्रोम एक्सटेंशन बनाया। प्रस्तुत है "कॉपीस्प्लैश", वह क्रोम एक्सटेंशन जिसके बारे में आप कभी नहीं जानते थे कि आपको इसकी आवश्यकता है लेकिन अब आप इसके बिना नहीं रह सकते!

और सबसे अच्छी बात? यह एक ओपन-सोर्स प्रोजेक्ट है! (गिटहब) बेझिझक कोड के बारे में गहराई से जानें, योगदान दें, सुविधाओं का सुझाव दें, या यहां तक ​​कि मुझे बताएं कि आप इसे कितना पसंद करते हैं या नहीं? तारीफों की हमेशा सराहना की जाती है।

"कॉपीस्प्लैश" क्या करता है?

  • अनस्प्लैश छवियों पर एक सुविधाजनक "कॉपी लिंक" बटन ओवरले प्रदान करता है, जिससे उपयोगकर्ता एक क्लिक के साथ छवि यूआरएल को अपने क्लिपबोर्ड पर तुरंत कॉपी कर सकते हैं।

How to use Unsplash Images in your code

  • अपनी विशिष्ट आवश्यकताओं के अनुरूप आकार, गुणवत्ता, क्रॉपिंग और बहुत कुछ समायोजित करने और उन्हें सहेजने के लिए कस्टम पैरामीटर सेट करें।

How to use Unsplash Images in your code

लेकिन रुकिए... अनस्प्लैश और इम्गिक्स के साथ क्या डील है?

अनस्प्लैश इमगिक्स रेंडरिंग एपीआई (लिंक) का उपयोग करता है, जो एक शक्तिशाली छवि प्रसंस्करण सेवा है जो वेब डिलीवरी के लिए छवियों को गतिशील रूप से आकार देती है, क्रॉप करती है और अनुकूलित करती है। अनस्प्लैश से प्रत्येक छवि यूआरएल को Imgix के माध्यम से संसाधित किया जाता है, यही कारण है कि यूआरएल अक्सर पैरामीटर से भरे होते हैं।

अपनी कस्टम सेटिंग्स सेट करने के लिए रेंडरिंग एपीआई दस्तावेज़ देखें जो कॉपी किए गए यूआरएल में एकीकृत होंगे

निष्कर्ष: अब और अनप्लैश यूआरएल ड्रामा नहीं!

यदि आप एक डेवलपर हैं जो अक्सर अनस्प्लैश छवियों का उपयोग करते हैं, तो "कॉपीस्प्लैश" आपका बहुत समय और प्रयास बचा सकता है। इसे आज़माएं, और चाहे आपके पास किसी नई सुविधा के लिए कोई विचार हो, कोड में सुधार करना हो, या दस्तावेज़ीकरण में सहायता करना हो, आपके इनपुट का स्वागत है!

लिंक:

  • कॉपीस्प्लैश एक्सटेंशन
  • कॉपीस्प्लैश कोड
  • Imgix
  • अनप्लैश
विज्ञप्ति वक्तव्य यह लेख यहां पुन: प्रस्तुत किया गया है: https://dev.to/dalisys/how-to-use-unsplash-images-in-your-code-4me8?1 यदि कोई उल्लंघन है, तो कृपया हटाने के लिए स्टडी_गोलंग@163.com पर संपर्क करें। यह
नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3