Bagaimana untuk merujuk imej dalam JavaScript

JavaScript ialah bahasa pengaturcaraan yang sangat popular yang digunakan secara meluas dalam pembangunan bahagian hadapan Web. Dalam aplikasi web, gambar adalah sumber yang biasa digunakan Cara menggunakan JavaScript untuk merujuk gambar adalah bahagian yang sangat penting dalam pembangunan web. Artikel ini akan memperkenalkan anda kepada cara merujuk imej dalam JavaScript.

1. Gunakan tag HTML untuk merujuk imej

Dalam HTML, cara biasa untuk merujuk imej adalah menggunakan tag img, seperti yang ditunjukkan di bawah:

<img src="/static/imghwm/default1.png"  data-src="image.jpg"  class="lazy" alt="图片">

Antaranya, atribut src ditentukan Laluan imej Atribut alt ialah teks alternatif yang dipaparkan apabila imej tidak boleh dimuatkan. JavaScript boleh mengubah suai imej yang dipaparkan secara dinamik dengan memanipulasi atribut teg img.

Sebagai contoh, kita boleh menambah atribut id pada teg img, kemudian mendapatkan teg melalui objek dokumen dan mengubah suai nilai atribut srcnya untuk mencapai kesan imej yang berubah secara dinamik. Kod sampel adalah seperti berikut:

<img src="/static/imghwm/default1.png"  data-src="old-image.jpg"  class="lazy"  id="myImg" alt="图片">

var img = document.getElementById("myImg");
img.src = "new-image.jpg";

2. Gunakan gaya CSS untuk merujuk imej

Dalam CSS, kita boleh menggunakan gaya imej latar belakang untuk merujuk imej, seperti yang ditunjukkan di bawah:

background-image: url("image.jpg");

Begitu juga, JavaScript boleh mengubah suai imej latar belakang yang dipaparkan secara dinamik dengan memanipulasi atribut gaya elemen. Sebagai contoh, kita boleh menggantikan imej latar belakang elemen div dengan imej lain Kod sampel adalah seperti berikut:

<div id="myDiv" style="background-image: url(old-image.jpg)"></div>

var div = document.getElementById("myDiv");
div.style.backgroundImage = 'url(new-image.jpg)';

3. Gunakan Kanvas untuk melukis imej

Kanvas ialah API lukisan dalam. HTML5 boleh digunakan untuk melukis grafik, teks, gambar, dll. Untuk melukis gambar dalam Kanvas, anda perlu mencipta objek Imej dahulu, dan kemudian gunakan kaedah drawImage untuk melukisnya pada Kanvas Kod sampel adalah seperti berikut:

<canvas id="myCanvas"></canvas>

rrree

4. Gunakan pengekodan Base64 untuk merujuk kepada. gambar

dalam JavaScript , kami juga boleh menggunakan pengekodan Base64 untuk membenamkan imej terus ke dalam HTML atau CSS, mengelakkan overhed permintaan rangkaian. Kaedah khusus adalah untuk menukar fail imej kepada rentetan berkod Base64, dan kemudian membenamkan rentetan terus ke dalam kod HTML atau CSS Kod sampel adalah seperti berikut:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0); // 将图片绘制到Canvas上
};
img.src = "image.jpg";

<img  src="/static/imghwm/default1.png"  data-src="data:image/jpeg;base64,/9j/4AAQSkZJRgA...（省略部分字符串）"  class="lazy" alt="Bagaimana untuk merujuk imej dalam JavaScript" >

Walau bagaimanapun, menggunakan pengekodan Base64 untuk membenamkan. imej akan menjadikan HTML atau CSS Kod menjadi kembung dan mengurangkan kebolehbacaan kod. Oleh itu, adalah disyorkan untuk menggunakan kaedah ini hanya apabila imej kecil dan jarang digunakan.

Ringkasan:

Terdapat banyak cara untuk merujuk imej dalam JavaScript Anda boleh menggunakan teg HTML, gaya CSS, lukisan Kanvas, pengekodan Base64 dan teknologi lain. Dalam pembangunan sebenar, adalah perlu untuk memilih kaedah yang sesuai mengikut keperluan dan senario perniagaan tertentu. Kita boleh memilih kaedah yang sesuai untuk memetik imej mengikut keadaan kita sendiri dan memperoleh pengalaman pembangunan yang lebih baik dalam pembangunan Web.

Atas ialah kandungan terperinci Bagaimana untuk merujuk imej dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!