Hiển thị trình giữ chỗ nếu không tìm thấy hình ảnh [trùng lặp]

Aug 16 2020

Tôi đã cố gắng sử dụng onerror. Bất cứ khi nào hình ảnh không được tìm thấy trong thư mục, nó sẽ hiển thị một trình giữ chỗ. Đường dẫn hình ảnh của tôi là động và đến từ phần phụ trợ. Dưới đây là cách tôi sử dụng nó.

<img class="" src="{{imagePath}}my_image.jpg" onerror="this.src='{{imagePath}}placeholder.jpg';" alt="Image not found">

Nhưng điều này không hoạt động và đưa ra lỗi.

Trả lời

CarlosEduardoSalazarMori Aug 16 2020 at 10:00

Đối với điều này, tôi đã sử dụng picturethẻ, trình duyệt sẽ thử nguồn đầu tiên, sau đó thứ hai, nếu trình duyệt không có trình thông dịch hình ảnh sẽ sử dụng imgthẻ.

Như thế này:

<picture>
  <source alt="Special Days" srcset="[First Image route].jpg" type="image/jpeg">
  <source alt="Special Days" srcset="[Second Image route].jpg" type="image/jpeg">
  <img alt="Imagen" src="[First Image route].jpg">
</picture>