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

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

我使用的技術如下:

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

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

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

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

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

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