वेब-अनुप्रयोगों में छवियों का उपयोग कैसे करें

यह ट्यूटोरियल वेब अनुप्रयोगों में Image घटक उपयोग का वर्णन करता है।

Look & Feel

• Upload - बटन दबाकर और फाइल सिस्टम से एक छवि का चयन करके एक छवि को पूर्वनिर्धारित करना संभव है;

• Image alt [ string ] - जिसे ऑल्ट टैग और ऑल्ट डिस्क्रिप्शन भी कहा जाता है, ऑल्ट टेक्स्ट वह लिखित कॉपी है जो किसी वेबपेज पर इमेज के स्थान पर दिखाई देती है अगर इमेज किसी यूजर की स्क्रीन पर लोड होने में विफल रहती है। यह पाठ स्क्रीन-रीडिंग टूल को दृष्टिबाधित पाठकों के लिए छवियों का वर्णन करने में मदद करता है और खोज इंजन को आपकी वेबसाइट को बेहतर क्रॉल और रैंक करने की अनुमति देता है;
• Width [ string ] - डिफ़ॉल्ट रूप से छवि की चौड़ाई;
• Height [ string ] - डिफ़ॉल्ट रूप से छवि की ऊँचाई;
• Visible [ boolean ] - परिभाषित करता है कि छवि दिखाई दे रही है या नहीं;
• Name [ string ] - घटक का नाम;

संबंधित व्यावसायिक प्रक्रियाएं

HTML में इमेज इमेज ऑब्जेक्ट का ही संदर्भ है। इसलिए, छवि हमेशा लिंक के साथ काम करती है और छवि डेटा का उपयोग करने के लिए, आपको इसके लिए एक लिंक प्राप्त करने की आवश्यकता होती है।

निम्नलिखित BPs वेब अनुप्रयोगों के उपयोग के लिए पूर्व-जेनरेट किए गए हैं:

• Image Get Properties - छवि गुण प्राप्त करें:
  • Component ID [ string ] - घटक की पहचानकर्ता;
  • Width [ string ] - छवि की चौड़ाई;
  • Height [ string ] - छवि की ऊँचाई;
  • Image URL [ string ] - छवि URL-पता;
  • Tooltip [ string ] - टूलटिप स्ट्रिंग को होवर पर दिखाया जाना है;
  • Visible [ boolean ] - परिभाषित करता है कि छवि दिखाई दे रही है या नहीं;
  • Loading है [ boolean ] - अगर true है तो छवि को " लोडिंग " स्थिति में सेट करता है;

• Image Set Properties - चयनित छवि के सभी गुणों को रीसेट करता है और इसके बजाय दिए गए गुणों को सेट करता है:
  • Component ID [ string ] - घटक की पहचानकर्ता;
  • Width [ string ] - छवि की चौड़ाई;
  • Height [ string ] - छवि की ऊँचाई;
  • Image URL [ string ] - छवि यूआरएल-पता ;;
  • Tooltip [ string ] - टूलटिप स्ट्रिंग को होवर पर दिखाया जाना है;
  • Visible [ boolean ] - परिभाषित करता है कि छवि दिखाई दे रही है या नहीं;
  • Loading है [ boolean ] - अगर true है तो छवि को " लोडिंग " स्थिति में सेट करता है;

• Image Update Properties - अद्यतन छवि गुण:
  • Component ID [ string ] - घटक की पहचानकर्ता;
  • Width [ string ] - छवि की चौड़ाई;
  • Height [ string ] - छवि की ऊँचाई;
  • Image URL [ string ] - छवि URL-पता;
  • Tooltip [ string ] - टूलटिप स्ट्रिंग को होवर पर दिखाया जाना है;
  • Visible [ boolean ] - परिभाषित करता है कि छवि दिखाई दे रही है या नहीं;
  • Loading है [ boolean ] - अगर true है तो छवि को " लोडिंग " स्थिति में सेट करता है;

उपयोग उदाहरण

उपयोगकर्ता प्रोफ़ाइल अवतार लोड करने के एक उदाहरण पर विचार करें। वेब इंटरफ़ेस में एक छवि और एक बटन होता है जो BP को ट्रिगर करता है, और इस तरह दिखता है:

बीपी onClick ट्रिगर से शुरू होता है। उपयोगकर्ता के डिवाइस फाइल सिस्टम से फाइलों को चुनने के लिए Select Files ब्लॉक का उपयोग किया जाता है ( Max files = 1 , File types = Image )। यदि फ़ाइल को सफलतापूर्वक चुना गया है तो index=0 के साथ सरणी तत्व का चयन किया जाना है।

Files सरणी के परिणामी फ़ाइल तत्व को आगे उपयोग के लिए वेब एप्लिकेशन सर्वर पर अपलोड किया जाना चाहिए ( Server request POST /_files / )। यदि अनुरोध सफल होता है, तो Server request POST /_files/ ब्लॉक के आउटपुट पर फ़ाइल ऑब्जेक्ट को उसकी ID प्राप्त करने के लिए Expand file ब्लॉक के इनपुट में पास किया जाता है।

URL प्राप्त करने के लिए, आपको फ़ाइल ID लेने और उसके मान को एक स्ट्रिंग ( To String ) में बदलने की आवश्यकता है। सापेक्ष फ़ाइल पथ /api/_files/<ID>/download/ होगा। इस प्रकार, एक छवि अपलोड करने के लिए, फ़ाइल पथ को Image Update Properties ब्लॉक की Image URL संपत्ति में पारित करना होगा।

प्रकाशित आवेदन नीचे दिए गए उदाहरण पर है