Thay đổi img src JavaScript

ví dụ

Chỉ định một hình ảnh duy nhất

HTML

<img
  src="grapefruit-slice-332-332.jpg"
  width="160"
  alt="Slices of grapefruit, looking yummy." />

Kết quả

Sử dụng src với một bộ hình ảnh

Khi sử dụng một tập hợp hình ảnh với thuộc tính

HTML

Kết quả

Chỉ định dự phòng cho lựa chọn dựa trên khung nhìn

Khi sử dụng lựa chọn dựa trên khung nhìn của hình ảnh từ

Thuộc tính src chỉ định URL của hình ảnh. Do đó, bằng cách đặt một src mới, chúng ta có thể tự động thay đổi hình ảnh được đề cập

Trong bài đăng này, tôi sẽ chỉ cho bạn cách thực hiện điều này bằng cả JavaScript và jQuery thông thường

Thay đổi thuộc tính src bằng JavaScript thông thường

Nếu bạn chưa sử dụng jQuery, thì việc thêm thư viện chỉ để thao tác thuộc tính src là vô nghĩa. Thay vào đó, bạn chỉ có thể sử dụng vanilla JavaScript, có xu hướng nhanh hơn

Hãy xem ví dụ dưới đây

Nếu bạn chạy đoạn mã trên, bạn sẽ thấy rằng thuộc tính src của phần tử hình ảnh của chúng tôi được thay thế bằng mã JavaScript của chúng tôi

Một ví dụ dài dòng hơn cho những bạn muốn hiểu chuyện gì đang xảy ra ở đây

//Get our img element by using document.getElementById
var img = document.getElementById("myImage");

//Set the src property of our element to the new image URL
img.src = 'img/new-image.jpg';

Trong trường hợp này, chúng tôi đã chia quy trình thành hai bước

1. Chúng tôi đã truy xuất phần tử img từ DOM HTML của mình bằng cách sử dụng phương thức document. getElementById(). Chúng tôi đã chuyển “myImage” làm tham số vì đó là ID của hình ảnh của chúng tôi
2. Sau khi truy xuất img, chúng tôi có thể sửa đổi thuộc tính src của nó và gán một URL mới

Điều này sẽ buộc trình duyệt tải hình ảnh mới của chúng tôi

Thay đổi img src bằng jQuery

Nếu bạn đã sử dụng thư viện jQuery và bạn muốn giữ cho mã của mình nhất quán, bạn có thể sử dụng phương pháp sau

//Change the img property using jQuery's attr method
$("#myImage").attr("src", 'img/new-image.jpg');

Trong đoạn mã trên, chúng tôi đã tham chiếu hình ảnh theo ID của nó và sau đó sử dụng phương thức attr() của jQuery để đặt giá trị mới cho thuộc tính src của nó

Xác định thời điểm hình ảnh mới được tải

Nếu bạn cần làm gì đó sau khi hình ảnh mới được tải, thì bạn có thể đính kèm phương thức load() của jQuery vào ví dụ của chúng tôi ở trên

//Change the img property and use load() to figure out when
//the new image has been loaded
$("#myImage").attr("src", 'img/new-image.jpg').load(function(){
    alert('New image loaded!');
});

Khi jQuery đã thay đổi thuộc tính src và hình ảnh từ URL mới đã được tải trong trình duyệt, mã bên trong phương thức load() sẽ thực thi. Tuy nhiên, khối tải này sẽ không thực thi nếu hình ảnh được đề cập không tồn tại

Làm cách nào để thay thế img src trong js?

Bạn có thể thay đổi img src không?

Làm cách nào để thay đổi đường dẫn hình ảnh trong JavaScript?

Sergey Podgornyy .

Then you can change the URL of an image:.

tài liệu. getElementById("myImg"). src = "hackanm. gif"; Hoặc bạn có thể thay đổi src trong jQuery bằng cách

$("#my_image"). attr("src","giây. jpg"); Để đính kèm sự kiện này vào sự kiện onclick, bạn có thể viết. $('#my_image')

Làm cách nào để tự động thay đổi hình ảnh trong JavaScript?