xem nếu src của img tồn tại

Question

khi tôi đặt thẻ img, tôi tạo thuộc tính src động. Có cách nào kiểm tra nếu src (đường dẫn mà hình ảnh được nằm) thực sự tồn tại với javascript để tránh bị:

Answer 1

Bạn có thể sử dụng các sự kiện error:

var im = document.getElementById('imageID'); // or select based on classes 
im.onerror = function(){ 
    // image not found or change src like this as default image: 

    im.src = 'new path'; 
}; 

Version Inline:

<img src="whatever" onError="this.src = 'new default path'" /> 

Hoặc

<img src="whatever" onError="doSomething();" /> 

---

<img> thẻ hỗ trợ các sự kiện:

• abort (onAbort)
• error (onerror)
• load (onLoad)

Thông tin thêm:

• JavaScript Events
• jQuery's error

Answer 2

bạn có thể thực hiện cuộc gọi ajax trước (với head phương pháp) và xem mã máy chủ trở lại hoặc bạn có thể sử dụng onerror sự kiện thay đổi url hoặc làm cho nó ẩn, ví dụ

<img src="notexist.jpg" onerror="this.style.visibility = 'hidden'"> 

(Tôi đã sử dụng thuộc tính inline chỉ để giải thích ý tưởng)

Answer 3

Bạn đang tiếp cận này một cách sai lầm.
Khi bạn tạo liên kết của mình với tập lệnh phía máy chủ, hãy kiểm tra xem liệu tệp có tồn tại hay không (bằng cách sử dụng file_exists() trong PHP chẳng hạn).

Bạn không nên dựa vào JavaScript khi bạn có thể làm điều đó ở phía máy chủ, vì JavaScript có thể được thay đổi và vô hiệu hóa.

Tự hỏi mình làm cách nào để tạo thuộc tính src= và kiểm tra xem tệp có tồn tại hay không và cung cấp giải pháp thay thế.

Answer 4

Nếu bạn tạo src động với javascript bạn có thể sử dụng này:

var obj = new Image(); 
 
    obj.src = "http://www.javatpoint.com/images/javascript/javascript_logo.png"; 
 

 
if (obj.complete) { 
 
    alert('worked'); 
 
} else { 
 
    alert('doesnt work'); 
 
}