其他分享
首页 > 其他分享> > 如何在 Vue3 中处理 img 标签图片无法加载的问题

如何在 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 事件,所以可以在拿到响应数据的时候处理一下为空的情况,用默认图片路径来替换。

标签:img,onerror,无法,useDefaultImage,Vue3,加载,thumbnail,图片
来源: https://www.cnblogs.com/zhiyiYo/p/15973175.html