HTML，避免顯示無法找到的圖片

在開發網站時，我根據當前頁面的 URL 動態加載圖片。

為了避免未來忘記創建圖片，我尋找了一種避免顯示常見的“損壞圖片”所顯示的“該網站已棄置”的方法。

我使用的技術如下：

1
2
3

<img src="/{{$bookname}}.png" 
 onerror="this.remove()" 
/>

提示：在 HTML 中的內聯事件處理程序中，this 表示“該元素”

當然，最理想的方法是確保圖片始終可用。但從各種角度來看，這不是最優解。但作為獨立開發人員，我知道有可能不會注意到這一點，而且在我意識到之前，可能會顯示一張損壞的圖片數個星期。

如果需要，你還可以通過以下方式顯示一個替代圖片：

1
2
3

<img src="/{{$bookname}}.png" 
 onerror="this.onerror=null; this.src='fallback.png'" 
/>

這裡的this.onerror=null是必需的，以避免當替代圖片無法找到時出現“無限循環”。