如何在 Vue3 中處理 img 標簽圖片無法加載的問題

前言

有時因為圖片路徑錯誤等問題，<img> 標簽中的圖片無法正確加載，就會呈現出圖裂的模樣，很影響界面的美觀。這時候我們可以使用默認的圖片來替換掉無法加載的圖片，下面就來看下如何實現這個過程。

實現方式

<img> 標簽中的圖片無法正常加載時，會觸發 onerror 事件，所以我們可以給這個事件綁定一個回調 useDefaultImage，下面是實現代碼：

<template>
    <img
        :src="data.thumbnail"
        @error.once="useDefaultImage"
        alt="縮略圖"
    />
</template>

<script>
export default {
    setup() {
        let defaultThumbnail = require("@/assets/image/article-thumbnail.jpg");

        function useDefaultImage(event) {
            event.target.src = defaultThumbnail;
        }

        return { useDefaultImage };
    },
};
</script>

正常情況下用了上述代碼之后就能加載默認圖片了，但是有一種情況下仍然無法觸發 onerror 事件：服務器返回的數據 data 沒有 thumbnail 屬性（比如在響應結果類上使用了 Jackson 的 @JsonInclude(JsonInclude.Include.NON_NULL) 注解），此時為 data.thumbnail 就會是 undefined，無法觸發 onerror 事件，所以可以在拿到響應數據的時候處理一下為空的情況，用默認圖片路徑來替換。