接口返回慢图片加载失败问题

前端攻城狮·左大

于 2023-07-07 16:30:13 发布

阅读量1.1k

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_46719868/article/details/131599670

版权

当后端接口响应慢，图片无法及时加载时，可以使用img标签的@error事件监听加载错误，然后在回调中设置图片的objectFit，高度，并重新赋值src以防止闪图。这种方法确保图片能正确显示，即使加载有延迟。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

该图片是通过后端接口返回picUrl来给img的src赋值但是后端接口响应较慢导致html加载完 data也没赋到值图片加载裂开
解决办法：img标签添加@error事件获取错误信息回调
<img v-if="certificateUrl" :src="certificateUrl" class="certificate-img" @error="imageError" />

 imageError(event) {
            let img = event.target;
            event.target.style.objectFit = 'contain'; // 这个无所谓
            event.target.style.height = '646px'; // 默认设置高度
            img.src = this.certificateUrl; // url是在data中定义的
            img.onerror = null; // 防止闪图
        },