Đối tượng Image đại diện cho phần tử HTML <img>. Cho phép tạo ảnh động và thao tác trước khi chèn vào DOM.
Ví dụ
<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Image object</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { font-size: 18px; font-weight: 500; color: rebeccapurple; } </style> </head> <body> <h1>Đối tượng Image() trong JavaScript</h1> <div class="result"><br /></div> <button class="Btn">NHẤN VÀO ĐÂY</button> <h3>Nhấn nút để hiển thị một ảnh</h3> <script> let resEle = document.querySelector(".result"); let BtnEle = document.querySelector(".Btn"); let newImage = new Image(500, 300); newImage.src = "https://i.picsum.photos/id/195/536/354.jpg"; BtnEle.addEventListener("click", () => { resEle.appendChild(newImage); }); </script> </body> </html>
Kết quả
Khi nhấn nút, ảnh được tải từ URL và chèn vào div .result. Kích thước 500x300 được set qua constructor new Image(width, height).
Đối tượng Image cũng hỗ trợ sự kiện onload, onerror để xử lý tải xong/lỗi. Hữu ích cho preload ảnh, lazy loading, canvas drawing.