Apa itu img src di javascript?

Question

Setelah Anda memiliki elemen, Anda dapat menetapkan nilai string baru ke properti src sebagai berikut

Nội dung chính Show

Untuk apa img src digunakan?
Bagaimana cara memberikan src gambar dalam JavaScript?
Apa yang dilakukan src di JavaScript?

<body>
  <img id="banner" src="image.jpg" />
  <script>
    const img = document.getElementById("banner");
    img.src = "newImage.png";
  script>
body>

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";

0

img.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 berikut

const 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

Untuk apa img src digunakan?

Tag Menentukan jalur ke gambar . alt - Menentukan teks alternatif untuk gambar, jika gambar karena alasan tertentu tidak dapat ditampilkan.

Bagaimana cara memberikan src gambar dalam JavaScript?

Buat Elemen Gambar di JavaScript . Kemudian, setel URL gambar ke atribut src-nya. Terakhir, tambahkan elemen gambar ke hierarki DOM dengan menambahkannya ke elemen body. Create an image element using the createElement() method on the document object. Then, set an image URL to its src attribute. Finally, add the image element to the DOM hierarchy by appending it to the body element.

Apa yang dilakukan src di JavaScript?

Atribut src menentukan URL file skrip eksternal . Jika Anda ingin menjalankan JavaScript yang sama pada beberapa halaman di situs web, Anda harus membuat file JavaScript eksternal, daripada menulis skrip yang sama berulang kali.

kode javascript

Apa itu img src di javascript?

Untuk apa img src digunakan?

Bagaimana cara memberikan src gambar dalam JavaScript?

Apa yang dilakukan src di JavaScript?

Bài Viết Liên Quan

Có thể bạn quan tâm

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội