CARA MENAMPILKAN GAMBAR DI JAVASCRIPT

Menampilkan gambar di JavaScript bisa jadi adalah kebutuhan penting saat kamu sedang membuat sebuah aplikasi web. Baik itu untuk menampilkan avatar pengguna, gambar produk di e-commerce, ataupun sekedar mempercantik tampilan website. Meski tampak sederhana, namun kamu perlu memahami beberapa hal terkait dengan cara kerja JavaScript dalam menampilkan gambar.

Memahami Objek Image Pada JavaScript

Objek Image dalam JavaScript memungkinkan kita untuk memanipulasi gambar di dalam sebuah dokumen HTML. Dengan objek ini, kita dapat menetapkan sumber gambar, merubah ukuran, dan bahkan mengubah gambar yang ditampilkan.

Berikut adalah contoh bagaimana kamu bisa membuat objek Image dan menetapkan sumber gambar:

let gambar = new Image(); 
gambar.src = 'lokasi/gambar.jpg';

Anda bisa memanfaatkan source dan atribut lainnya dari objek Image untuk mengubah gambar sesuai keinginan kamu.

Menampilkan Gambar Menggunakan JavaScript

Setelah kamu menyiapkan objek Image, berikutnya kita bisa menampilkan gambar tersebut di dalam dokumen HTML. Caranya cukup mudah, kita hanya perlu memilih elemen HTML tempat kita ingin menempatkan gambar tersebut dan mengubah isi HTML elemen tersebut dengan gambar kita.

Berikut ini adalah contoh bagaimana cara melakukan hal tersebut:

document.getElementById('tempatGambar').innerHTML = '<img src="' + gambar.src + '" />'; 

Dengan cara ini, gambar akan ditampilkan pada elemen dengan id ‘tempatGambar’.

Mengubah Ukuran Gambar

Cara mengubah ukuran gambar juga cukup sederhana. Kamu hanya perlu menggunakan atribut width dan height dari objek gambar. Berikut ini adalah contoh bagaimana cara melakukan hal tersebut:

gambar.width = 200; 
gambar.height = 200;  

Mengubah Gambar yang Ditampilkan

Untuk merubah gambar yang ditampilkan, kamu hanya perlu merubah sumber (source) dari gambar tersebut. Berikut adalah contoh bagaimana cara melakukan hal tersebut:

gambar.src = 'lokasi/gambar-baru.jpg'; 

Dengan demikian, gambar akan berubah menjadi gambar baru yang sudah ditentukan.

Itulah beberapa cara yang bisa kamu gunakan untuk menampilkan gambar di JavaScript. Kamu bisa mempraktikan cara di atas dan merasakan sendiri bagaimana kerja JavaScript dalam menampilkan dan memanipulasi gambar. Semoga cara di atas bermanfaat untuk kamu. Selamat mencoba!