Hướng dẫn này mô tả cách sử dụng thành phần Image trong các ứng dụng web.
Look & Feel
- Upload - có thể xác định trước hình ảnh bằng cách nhấn nút và chọn hình ảnh từ hệ thống tệp;
- Image alt [ string ] - còn được gọi là thẻ alt và mô tả alt, văn bản thay thế là bản sao bằng văn bản xuất hiện thay cho hình ảnh trên trang web nếu hình ảnh không tải được trên màn hình của người dùng. Văn bản này giúp các công cụ đọc màn hình mô tả hình ảnh cho người đọc khiếm thị và cho phép các công cụ tìm kiếm thu thập thông tin và xếp hạng trang web của bạn tốt hơn;
- Width [ string ] - chiều rộng hình ảnh theo mặc định;
- Height [ string ] - chiều cao hình ảnh theo mặc định;
- Visible [ boolean ] - xác định xem hình ảnh có hiển thị hay không;
- Name [ string ] - tên của thành phần;
Quy trình nghiệp vụ liên quan
Hình ảnh trong HTML là một tham chiếu đến chính đối tượng hình ảnh. Do đó, Hình ảnh luôn hoạt động với các liên kết và để sử dụng dữ liệu hình ảnh, bạn cần lấy liên kết đến nó.
Các BPs sau được tạo trước để sử dụng ứng dụng web:
- Image Get Properties - nhận các thuộc tính hình ảnh:
- Component ID [ string ] - định danh của thành phần;
- Width [ string ] - chiều rộng hình ảnh;
- Height [ string ] - chiều cao hình ảnh;
- Image URL [ string ] - địa chỉ URL hình ảnh;
- Tooltip công cụ [ string ] - chuỗi chú giải công cụ sẽ được hiển thị khi di chuột;
- Visible [ boolean ] - xác định xem hình ảnh có hiển thị hay không;
- Loading [ boolean ] - đặt hình ảnh ở trạng thái " loading " nếu true ;
- Image Set Properties - đặt lại tất cả các thuộc tính của hình ảnh đã chọn và thay vào đó đặt các thuộc tính đã cho:
- Component ID [ string ] - định danh của thành phần;
- Width [ string ] - chiều rộng hình ảnh;
- Height [ string ] - chiều cao hình ảnh;
- Image URL [ string ] - địa chỉ URL hình ảnh;;
- Tooltip công cụ [ string ] - chuỗi chú giải công cụ sẽ được hiển thị khi di chuột;
- Visible [ boolean ] - xác định xem hình ảnh có hiển thị hay không;
- Loading [ boolean ] - đặt hình ảnh ở trạng thái " loading " nếu true ;
- Image Update Properties cập nhật hình ảnh - cập nhật thuộc tính hình ảnh:
- Component ID [ string ] - mã định danh của thành phần;
- Width [ string ] - chiều rộng hình ảnh;
- Height [ string ] - chiều cao hình ảnh;
- Image URL [ string ] - địa chỉ URL hình ảnh;
- Tooltip công cụ [ string ] - chuỗi chú giải công cụ sẽ được hiển thị khi di chuột;
- Visible [ boolean ] - xác định xem hình ảnh có hiển thị hay không;
- Loading [ boolean ] - đặt hình ảnh ở trạng thái " loading " nếu true ;
ví dụ sử dụng
Hãy xem xét một ví dụ về tải hình đại diện hồ sơ người dùng. Giao diện web bao gồm một hình ảnh và một nút kích hoạt BP và trông giống như sau:
BP bắt đầu từ trình kích hoạt onClick . Để chọn các tệp từ hệ thống tệp thiết bị của người dùng Select Files được sử dụng ( Max files = 1 , File types = Image ). Nếu tệp được chọn thành công, phần tử mảng có index=0 được chọn.
Phần tử tệp kết quả của mảng Files phải được tải lên máy chủ ứng dụng web để sử dụng tiếp ( Server request POST /_files / ). Nếu yêu cầu thành công, đối tượng tệp ở đầu ra của khối Server request POST /_files/ được chuyển đến đầu vào của khối Expand file để lấy ID của nó.
Để lấy URL, bạn cần lấy ID tệp và chuyển đổi giá trị của nó thành một chuỗi ( To String ). Đường dẫn tệp tương đối sẽ là /api/_files/<ID>/download/ . Do đó, để tải lên một hình ảnh, đường dẫn tệp phải được chuyển vào thuộc tính Image URL của khối Image Update Properties .
Ứng dụng đã xuất bản là ví dụ bên dưới
