vue 解决img图片路径存在但图片无法访问时显示错误的问题

文章目录

- 项目场景
- 问题描述
- 原因分析
- 解决方案
- - [1. 模板代码（Vue）](#1. 模板代码（Vue）)
  - [2. 逻辑处理（TypeScript）](#2. 逻辑处理（TypeScript）)
  - 优化补充
- 总结

项目场景

在前端开发中，img 标签常用于展示用户头像，核心需求是优先加载用户自定义头像，无自定义头像时展示默认头像。

问题描述

常规开发中，我们会通过逻辑判断处理头像路径为空的情况，代码如下：

typescript 复制代码

<img :src="item.attachUrl || defaultUser" alt="用户头像"/>

上述代码仅能判断 attachUrl 是否为空，若 attachUrl 有值但对应的图片资源实际访问失败（如图片文件丢失、路径错误、网络问题等），页面中头像位置会显示图片加载失败的破损样式，影响用户体验。

原因分析

item.attachUrl || defaultUser 仅做值是否为空的逻辑判断，无法检测图片资源的实际可访问性；
图片加载失败属于网络/资源层面的错误，需通过 img 标签的原生事件捕获这类异常。

解决方案

利用 img 标签的 error 事件监听图片加载失败的情况，触发事件时将图片地址替换为默认头像，具体实现如下：

1. 模板代码（Vue）

html 复制代码

<!-- 绑定src并监听error事件 -->
<img 
  :src="item.attachUrl" 
  alt="用户头像" 
  @error="handleImgError" 
/>

2. 逻辑处理（TypeScript）

typescript 复制代码

// 引入默认头像资源
import defaultUser from "./img/user-icon.png";

/**
 * 处理图片加载失败的逻辑
 * @param e - 图片error事件对象
 */
const handleImgError = (e: Event) => {
  const target = e.target as HTMLImageElement;
  // 替换为默认头像
  target.src = defaultUser;
  // 可选：重置图片样式，避免加载失败的占位样式
  target.style.display = "inline-block";
  // 可选：防止error事件循环触发（若默认头像也加载失败）
  target.onerror = null;
};

优化补充

为避免默认头像也加载失败导致 error 事件循环触发，在事件处理函数中添加 target.onerror = null，确保仅替换一次。

总结

单纯的空值判断无法覆盖图片路径有效但资源不可访问的场景，需结合 img 的 error 事件处理；
图片加载失败时，通过事件对象替换 src 为默认头像，并可重置样式、阻断事件循环，保证用户体验；
核心逻辑：空值兜底 + 加载异常捕获，双重保障头像展示的稳定性。