Cara menggunakan gambar dalam aplikasi web

Tutorial ini menjelaskan penggunaan komponen Image dalam aplikasi web.

Look & Feel

• Upload - Anda dapat menentukan gambar sebelumnya dengan menekan tombol dan memilih gambar dari sistem file;

• Image alt [ string ] - juga disebut tag alt dan deskripsi alt, teks alt adalah salinan tertulis yang muncul sebagai pengganti gambar di halaman web jika gambar gagal dimuat di layar pengguna. Teks ini membantu alat pembaca layar menjelaskan gambar kepada pembaca tunanetra dan memungkinkan mesin pencari merayapi dan memberi peringkat situs web Anda dengan lebih baik;
• Width [ string ] - lebar gambar secara default;
• Height [ string ] - tinggi gambar secara default;
• Visible [ boolean ] - menentukan apakah gambar terlihat atau tidak;
• Name [ string ] - nama komponen;

Proses bisnis terkait

Gambar dalam HTML adalah referensi ke objek gambar itu sendiri. Oleh karena itu, Gambar selalu berfungsi dengan tautan dan, untuk menggunakan data gambar, Anda perlu mendapatkan tautan ke sana.

BPs berikut dibuat sebelumnya untuk penggunaan aplikasi web:

• Image Get Properties - dapatkan properti gambar:
  • Component ID [ string ] - pengenal komponen;
  • Width [ string ] - lebar gambar;
  • Height [ string ] - tinggi gambar;
  • Image URL [ string ] - alamat URL gambar;
  • Tooltip [ string ] - string tooltip yang akan ditampilkan pada hover;
  • Visible [ boolean ] - menentukan apakah gambar terlihat atau tidak;
  • Loading [ boolean ] - mengatur gambar ke status " memuat " jika true ;

• Image Set Properties - mengatur ulang semua properti dari gambar yang dipilih dan mengatur yang diberikan sebagai gantinya:
  • Component ID [ string ] - pengenal komponen;
  • Width [ string ] - lebar gambar;
  • Height [ string ] - tinggi gambar;
  • Image URL [ string ] - alamat URL gambar;;
  • Tooltip [ string ] - string tooltip yang akan ditampilkan pada hover;
  • Visible [ boolean ] - menentukan apakah gambar terlihat atau tidak;
  • Loading [ boolean ] - mengatur gambar ke status " memuat " jika true ;

• Image Update Properties - memperbarui properti gambar:
  • Component ID [ string ] - pengenal komponen;
  • Width [ string ] - lebar gambar;
  • Height [ string ] - tinggi gambar;
  • Image URL [ string ] - alamat URL gambar;
  • Tooltip [ string ] - string tooltip yang akan ditampilkan pada hover;
  • Visible [ boolean ] - menentukan apakah gambar terlihat atau tidak;
  • Loading [ boolean ] - mengatur gambar ke status " memuat " jika true ;

Contoh penggunaan

Pertimbangkan contoh memuat avatar profil pengguna. Antarmuka web terdiri dari gambar dan tombol yang memicu BP, dan terlihat seperti ini:

BP dimulai dari pemicu onClick . Untuk memilih file dari sistem file perangkat pengguna, blok Select Files digunakan ( Max files = 1 , File types = Image ). Jika file berhasil dipilih, elemen array dengan index=0 akan dipilih.

Elemen file yang dihasilkan dari larik Files harus diunggah ke server aplikasi web untuk digunakan lebih lanjut ( Server request POST /_files / ). Jika permintaan berhasil, objek file pada output dari blok Server request POST /_files/ diteruskan ke input dari blok Expand file untuk mendapatkan ID -nya.

Untuk mendapatkan URL, Anda perlu mengambil ID file dan mengonversi nilainya menjadi string ( To String ). Jalur file relatif adalah /api/_files/<ID>/download/ . Jadi, untuk mengunggah gambar, jalur file harus diteruskan ke properti Image URL dari blok Image Update Properties .

Aplikasi yang diterbitkan ada pada contoh di bawah ini