Setelah Anda memiliki elemen, Anda dapat menetapkan nilai string
baru ke properti src
sebagai berikut
const img = document.getElementById["banner"];
img.src = "newImage.png";
Saat Anda memiliki gambar di folder lain, Anda juga perlu menambahkan jalur gambar ke atribut src
. Kode di bawah ini menunjukkan cara mengubah atribut src
menjadi gambar di dalam folder
img.src = "./assets/newImage.png";
0img.src = "./assets/newImage.png";
_Terakhir, jika Anda perlu menjalankan beberapa kode JavaScript setelah gambar baru dimuat ke elemen, Anda dapat menambahkan pemuat peristiwa
img.src = "./assets/newImage.png";
1 ke elemen img.src = "./assets/newImage.png";
2 Anda sebelum mengubah atribut src
sebagai berikutconst img = document.getElementById["banner"];
img.onload = function [] {
alert["New image has been loaded"];
};
img.src = "newImage.png";
Dengan menggunakan kode di atas, peringatan akan dipicu saat gambar baru dari atribut src
telah dimuat ke halaman HTML
The HTML DOM Image src Property is used to set or returns the value of the src attribute of the _
Langkah pertama adalah menanyakan DOM untuk gambar ini. Kita dapat melakukan ini dengan menggunakan metode querySelector[]
const image = document.querySelector[".image"];
_Sekarang kita memiliki elemen kita, kita dapat mengubah src
atribut gambar
const image = document.querySelector[".image"];
image.src = "dog.png";
Ini mengubah DOM menjadi ini
Terkadang, Anda ingin menjalankan beberapa kode setelah gambar dimuat. Untungnya, hal ini dapat dilakukan dengan mudah hanya dengan menambahkan event listener ke gambar
const image = document.querySelector[".image"];
image.addEventListener["load", [] => {
console.log["The image has loaded!"];
}];
Sekarang, ketika gambar telah dimuat, fungsi akan dijalankan, mencetak ke konsol. Anda dapat melakukan apapun yang Anda inginkan, termasuk mengubah src
atribut gambar ke gambar lain
Dalam posting ini, kita telah melihat bagaimana kita dapat menggunakan JavaScript untuk mengubah atribut src
dari suatu gambar
Jika mau, Anda juga dapat menjalankan beberapa kode setelah gambar dimuat
Semoga Anda menikmati postingan ini, terima kasih telah membaca
Jika Anda ingin belajar tentang pengembangan web, mendirikan start-up, bootstrap SaaS, dan lainnya, ikuti saya di Twitter. Anda juga dapat bergabung dalam percakapan di Discord resmi kami