Nhận hình ảnh src JavaScript

Điều này bao gồm khả năng thay đổi thuộc tính src của hình ảnh thành một giá trị mới, cho phép bạn thay đổi hình ảnh đang được tải

Trong bài đăng này, chúng ta sẽ tìm hiểu cách sử dụng JavaScript để thay đổi thuộc tính src của hình ảnh

Giả sử đây là DOM của chúng ta

Bước đầu tiên là truy vấn DOM cho hình ảnh này. Chúng ta có thể làm điều này bằng cách sử dụng phương pháp

	const image = document.querySelector[".image"];

	const image = document.querySelector[".image"];

Bây giờ chúng ta đã có phần tử của mình, chúng ta có thể thay đổi thuộc tính src của hình ảnh

	const image = document.querySelector[".image"];

image.src = "dog.png";

Điều này biến DOM thành cái này

Đôi khi, bạn muốn chạy một số mã sau khi tải xong hình ảnh. Rất may, điều này có thể dễ dàng thực hiện bằng cách thêm một trình lắng nghe sự kiện vào hình ảnh

	const image = document.querySelector[".image"];

image.addEventListener["load", [] => {
    console.log["The image has loaded!"];
}];

Bây giờ, khi hình ảnh đã được tải, chức năng sẽ thực thi, in ra bàn điều khiển. Bạn có thể làm bất cứ điều gì bạn muốn, bao gồm cả việc thay đổi thuộc tính src của hình ảnh thành một hình ảnh khác

Tôi chắc chắn rằng bạn phải làm quen với thẻ HTML img. Chúng ta đều biết rằng sử dụng thẻ này, chúng ta có thể hiển thị một hình ảnh trên trang web. Tất cả những gì chúng ta phải làm chỉ là cung cấp đường dẫn hình ảnh bên trong thuộc tính src của thẻ hình ảnh

Bây giờ, trong bài viết này, tôi sẽ cho bạn biết cách lấy giá trị thuộc tính src của thẻ img trong JavaScript

Dưới đây là một ví dụ về cách chúng tôi có thể hiển thị hình ảnh trên trang web bằng thẻ HTML img

Bây giờ chúng tôi muốn lấy giá trị src của thẻ img HTML ở trên. Chúng ta có thể thấy rõ rằng thuộc tính src có giá trị đường dẫn “cat. png”. Chúng tôi muốn nhận giá trị theo chương trình với JavaScript

Ngoài ra, đọc

• Làm cách nào bạn có thể thay đổi đường dẫn tệp src của thẻ img trong jQuery?

Mã JavaScript để lấy giá trị thuộc tính src của thẻ img HTML

Dưới đây là mã JavaScript của chúng tôi để lấy giá trị src từ thẻ img ở trên mà tôi vừa sử dụng làm ví dụ

var img_src = document.getElementById["my-img"].src;
console.log[img_src];

Nếu chúng tôi chạy mã của mình trên trình duyệt, chúng tôi có thể thấy “thư mục/mèo. png” trong nhật ký giao diện điều khiển. Bạn có thể thấy rằng nó trả về đường dẫn đầy đủ của tệp src

Thật dễ dàng và đơn giản. Phải không?

Ở đây chúng tôi đã sử dụng thuộc tính src của hình ảnh HTML để lấy giá trị thuộc tính. Thuộc tính src của JavaScript HTML DOM có thể đặt hoặc trả về giá trị của thuộc tính src. Trong trường hợp của chúng tôi, chúng tôi đã sử dụng thuộc tính này để trả về giá trị thuộc tính

Thuộc tính

	const image = document.querySelector[".image"];

	const image = document.querySelector[".image"];

	const image = document.querySelector[".image"];

	const image = document.querySelector[".image"];

	const image = document.querySelector[".image"];

	const image = document.querySelector[".image"];

	const image = document.querySelector[".image"];

	const image = document.querySelector[".image"];

	const image = document.querySelector[".image"];

	const image = document.querySelector[".image"];