Bagaimana untuk menambah gambar dalam javascript

Dalam pembangunan web, memuatkan imej secara dinamik adalah keperluan yang sangat biasa. JavaScript, sebagai bahasa skrip, boleh digunakan untuk mencapai matlamat ini. Artikel ini akan memperkenalkan cara JavaScript melaksanakan pemuatan imej.

1. Gunakan kaedah document.createElement()

Gunakan kaedah document.createElement() untuk mencipta elemen HTML baharu dalam halaman. Sudah tentu, terdapat juga elemen grafik yang disertakan. Langkah-langkah khusus adalah seperti berikut:

1) Gunakan kaedah document.createElement() dalam JavaScript untuk membuat teg

Sebagai contoh, kita boleh mencipta elemen imej baharu menggunakan kod berikut:

var img = document.createElement('img');

2) Berikan URL imej kepada elemen dengan menetapkan atribut "src" bagi unsur.

Sebagai contoh, kita boleh menggunakan kod berikut untuk menentukan laluan imej bagi elemen imej baharu:

img.src = "example.jpg";

3) Tambahkan elemen pada halaman.

Sebagai contoh, kita boleh menggunakan kod berikut untuk menambahkan elemen ini pada elemen HTML tertentu halaman web:

document.getElementById("image_container").appendChild(img);

Di mana image_container mewakili ID elemen HTML yang memegang imej. Melalui langkah ini, elemen imej baharu berjaya ditambahkan pada halaman web.

2. Menggunakan jQuery

Selain menggunakan kaedah asli JavaScript, kami juga boleh menggunakan perpustakaan alat jQuery untuk menyelesaikan tugas memuatkan imej.

1) Dapatkan elemen DOM di mana imej perlu diletakkan.

Dalam jQuery, kita boleh menggunakan fungsi $() untuk mendapatkan elemen HTML yang ditentukan. Dalam kod berikut, kami mendapat elemen HTML dengan ID image_container dan menetapkannya kepada imageContainer pembolehubah baharu.

var imageContainer = $('#image_container');

2) Cipta elemen baharu dan tetapkan atributnya.

Dalam jQuery, anda boleh menggunakan fungsi $(html) untuk menukar rentetan tag HTML kepada elemen jQuery. Oleh itu, kita boleh mencipta elemen imej baharu seperti ini:

var img = $('<img  alt="Bagaimana untuk menambah gambar dalam javascript" >');

Anda boleh menetapkan sebarang sifat untuk elemen ini menggunakan kaedah prop(). Sebagai contoh, kita boleh menetapkan atribut src kepada laluan imej menggunakan kod berikut:

img.prop('src', 'example.jpg');

3) Tambah elemen baharu pada DOM.

Sama seperti JavaScript, kita boleh menggunakan kaedah append() jQuery untuk menambah elemen baharu pada elemen kontena:

imageContainer.append(img);

Pada ketika ini, imej telah berjaya dimuatkan secara dinamik ke dalam web muka surat .

Ringkasan:

Artikel ini memperkenalkan dua kaedah memuatkan imej secara dinamik melalui JavaScript. Apabila menggunakan kaedah document.createElement(), kita perlu mencipta elemen imej baharu, menetapkan atribut dan kemudian menambahkannya pada halaman web. Menggunakan jQuery boleh menyelesaikan tugas ini dengan lebih ringkas dan jelas.

Atas ialah kandungan terperinci Bagaimana untuk menambah gambar dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!