前言

有时因为图片路径错误等问题，<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 事件，所以可以在拿到响应数据的时候处理一下为空的情况，用默认图片路径来替换。