Hiển thị hình ảnh thay thế

Question

Có thể hiển thị hình ảnh thay thế nếu không tìm thấy tệp nguồn gốc không? Tôi muốn đạt được điều này chỉ với css và html, không có javascript (hoặc jQuery và như nhau). Ý tưởng là vẫn hiển thị hình ảnh thay vì thử nghiệm "alt" hoặc dấu chéo (mặc định) xấu của IE. Nếu không thể không có javascript, tôi sẽ kiểm tra img src bằng php với cơ bản nếu-thì-else.

Answer 1

Bạn có thể làm điều này bằng cách sử dụng CSS tài sản background-image của phần tử img, tức là

img 
{ 
background-image:url('default.png'); 
} 

Tuy nhiên, bạn phải từ bỏ một chiều rộng hoặc chiều cao để làm việc này (khi img-src không phải là tìm thấy):

img 
{ 
background-image:url('default.png'); 
width:400px; 
} 

Answer 2

<object data="foobar.png" width=200 height=200> 
    <img src="test.png" alt="Just testing."> 
</object> 

đây foobar.png là hình ảnh chính, test.png là hình ảnh dự phòng. Theo ngữ nghĩa của phần tử object, nội dung của phần tử (ở đây là phần tử img) phải được hiển thị nếu và chỉ khi dữ liệu chính (được chỉ định bởi thuộc tính data) không thể được sử dụng.

Mặc dù các trình duyệt có lỗi khủng khiếp khi triển khai object trong năm qua, kỹ thuật đơn giản này dường như hoạt động trên các phiên bản hiện đại của IE, Firefox, Chrome.

Answer 3

Rất đơn giản và cách tốt nhất để đạt được điều này với mã ít

<img class="avatar" src="img/one.jpg" alt="Not Found" onerror=this.src="img/undefined.jpg"> 

Đối với tôi các công trình trên hoàn hảo!