วิธีใช้รูปภาพในเว็บแอปพลิเคชัน

บทช่วยสอนนี้อธิบายการใช้องค์ประกอบ Image ในเว็บแอปพลิเคชัน

Look & Feel

• Upload - เป็นไปได้ที่จะกำหนดรูปภาพล่วงหน้าโดยกดปุ่มและเลือกรูปภาพจากระบบไฟล์

• Image alt [ string ] - เรียกอีกอย่างว่าแท็ก alt และคำอธิบาย alt ข้อความแสดงแทนคือสำเนาที่เป็นลายลักษณ์อักษรที่ปรากฏแทนที่รูปภาพบนหน้าเว็บหากรูปภาพไม่สามารถโหลดบนหน้าจอของผู้ใช้ ข้อความนี้ช่วยให้เครื่องมืออ่านหน้าจออธิบายรูปภาพแก่ผู้อ่านที่มีความบกพร่องทางสายตา และช่วยให้เครื่องมือค้นหารวบรวมข้อมูลและจัดอันดับเว็บไซต์ของคุณได้ดีขึ้น
• 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 ] - ตั้งค่ารูปภาพเป็นสถานะ " loading " ถ้า true

• Image Set Properties - รีเซ็ตคุณสมบัติทั้งหมดของภาพที่เลือกและตั้งค่าที่กำหนดแทน:
  • Component ID [ string ] - ตัวระบุส่วนประกอบ
  • Width [ string ] - ความกว้างของภาพ;
  • Height [ string ] - ความสูงของภาพ;
  • Image URL [ string ] - ที่อยู่ URL รูปภาพ;;
  • คำแนะนำ Tooltip [ string ] - สตริงคำแนะนำเครื่องมือที่จะแสดงเมื่อโฮเวอร์;
  • Visible [ boolean ] - กำหนดว่าภาพนั้นมองเห็นได้หรือไม่;
  • Loading [ boolean ] - ตั้งค่ารูปภาพเป็นสถานะ " loading " ถ้า true

• Image Update Properties การอัพเดทอิมเมจ - อัพเดทคุณสมบัติของอิมเมจ:
  • Component ID [ string ] - ตัวระบุส่วนประกอบ
  • Width [ string ] - ความกว้างของภาพ;
  • Height [ string ] - ความสูงของภาพ;
  • Image URL [ string ] - ที่อยู่ URL รูปภาพ;
  • คำแนะนำ Tooltip [ string ] - สตริงคำแนะนำเครื่องมือที่จะแสดงเมื่อโฮเวอร์;
  • Visible ได้ [ boolean ] - กำหนดว่าภาพนั้นมองเห็นได้หรือไม่;
  • Loading [ boolean ] - ตั้งค่ารูปภาพเป็นสถานะ " loading " ถ้า true

ตัวอย่างการใช้งาน

พิจารณาตัวอย่างการโหลดอวาตาร์โปรไฟล์ผู้ใช้ เว็บอินเตอร์เฟสประกอบด้วยรูปภาพและปุ่มที่เรียกใช้ BP และมีลักษณะดังนี้:

BP เริ่มต้นจากทริกเกอร์ onClick ในการเลือกไฟล์จากระบบไฟล์ของอุปกรณ์ของผู้ใช้ Select Files ( Max files = 1 , File types = Image ) หากเลือกไฟล์สำเร็จแล้ว องค์ประกอบอาร์เรย์ที่มี index=0 จะถูกเลือก

องค์ประกอบไฟล์ที่เป็นผลลัพธ์ของอาร์เรย์ Files ต้องอัปโหลดไปยังเว็บแอปพลิเคชันเซิร์ฟเวอร์สำหรับการใช้งานเพิ่มเติม ( Server request POST /_files / ) หากคำขอสำเร็จ อ็อบเจ็กต์ไฟล์ที่เอาต์พุตของบล็อก Server request POST /_files/ จะถูกส่งผ่านไปยังอินพุตของบล็อก Expand file เพื่อรับ ID

ในการรับ URL คุณต้องใช้ ID ไฟล์และแปลงค่าเป็นสตริง ( To String ) เส้นทางไฟล์สัมพัทธ์จะเป็น /api/_files/<ID>/download/ ดังนั้น ในการอัปโหลดรูปภาพ จะต้องส่งพาธของไฟล์ไปยังคุณสมบัติ Image URL ของบล็อก Image Update Properties

แอปพลิเคชันที่เผยแพร่อยู่ในตัวอย่างด้านล่าง