網路環境總是多樣且複雜的，一張網頁圖片可能會因為網路狀況差而載入失敗或載入超長時間，也可能因為許可權不足或者資源不存在而載入失敗，這些都會導致使用者體驗變差，所以我們需要對圖片載入失敗時的情況進行一個彌補處理。

方法一：在img標籤上使用內聯事件處理圖片載入失敗的情況，引入圖片數量少的話可以這麼做，網頁內圖片較多的時候不推薦。（default.png是圖片載入錯誤時替換的圖片資源，可以自行修改路徑和檔名。）

<img src='xxxxx' onerror="this.src = 'default.png'">

方法二：為所有img標籤統一新增error處理事件，在捕獲階段截獲並觸發函式，從而減少效能損耗。

document.addEventListener(
    'error',
    e => {
        let target = e.target
        const tagName = target.tagName || ''
        if (tagName.toLowerCase = 'img') {
            target.src = 'default.png'
        }
        target = null
    },
    true
)

方法三：為每個img標籤額外新增一個data-retry-times計數屬性，當重試超過限制次數後就用base64圖片作為替代。

document.addEventListener(
    'error',
    e => {
        let target = e.target
        const tagName = target.tagName || ''
        const curTimes = Number(target.dataset.retryTimes) || 0
        if (tagName.toLowerCase() === 'img') {
            if (curTimes >= 3) {
                target.src = 'data:image/png;base64,xxxxxx