كيفية استخدام الصور في تطبيقات الويب

يصف هذا البرنامج التعليمي استخدام مكون Image في تطبيقات الويب.

Look & Feel

• Upload - من الممكن تحديد صورة مسبقًا بالضغط على الزر واختيار صورة من نظام الملفات ؛

• Image alt [ string ] - تسمى أيضًا علامات بديل وأوصاف بديلة ، والنص البديل هو النسخة المكتوبة التي تظهر بدلاً من صورة على صفحة ويب إذا فشل تحميل الصورة على شاشة المستخدم. يساعد هذا النص أدوات قراءة الشاشة في وصف الصور للقراء ضعاف البصر ويسمح لمحركات البحث بالزحف إلى موقع الويب الخاص بك وترتيبه بشكل أفضل ؛
• Width [ string ] - عرض الصورة بشكل افتراضي ؛
• Height [ string ] - ارتفاع الصورة افتراضيًا ؛
• Visible [ boolean ] - يحدد ما إذا كانت الصورة مرئية أم لا ؛
• Name [ string ] - اسم المكون ؛

العمليات التجارية ذات الصلة

الصورة في HTML هي إشارة إلى كائن الصورة نفسه. لذلك ، تعمل Image دائمًا مع الروابط ، ومن أجل استخدام بيانات الصورة ، تحتاج إلى الحصول على رابط لها.

تم 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 ] - عنوان URL للصورة ؛؛
  • 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 ، ويبدو كالتالي:

تبدأ BP من مشغل onClick . لاختيار الملفات من نظام ملفات جهاز المستخدم ، يتم استخدام كتلة Select Files ( Max files = 1 ، File types = Image ). إذا تم اختيار الملف بنجاح ، فسيتم تحديد عنصر صفيف مع index=0 .

يجب تحميل عنصر الملف الناتج من مصفوفة Files إلى خادم تطبيق الويب لمزيد من الاستخدام ( Server request POST /_files / ). في حالة نجاح الطلب ، يتم تمرير كائن الملف عند إخراج Server request POST /_files/ block إلى إدخال كتلة Expand file للحصول على ID الخاص به.

للحصول على عنوان URL ، تحتاج إلى أخذ ID الملف وتحويل قيمته إلى سلسلة ( To String ). سيكون مسار الملف النسبي /api/_files/<ID>/download/ . وبالتالي ، لتحميل صورة ، يجب تمرير مسار الملف إلى خاصية Image URL من كتلة Image Update Properties .

التطبيق المنشور في المثال أدناه