###
Vue 中 `
img`
标签图片加载失败解决方案
#### 将静态资源放置于公共目录
如果遇到位于 `assets` 文件夹中的
图片无法通过动态路径获取并
显示的问题，一种有效的解决办法是将这些
图片移至项目的 `public` 文件夹下。这样做能够确保
图片可以通过相对路径被正确访问[^1]。
```html
<
img src="/images/example.png" alt="Example">
```
#### 使用内联 `onerror` 属性自动切换备用
图像
为了提升用户体验，在
图片未能成功
加载的情况下提供替代方案是非常重要的。利用 HTML 的 `onerror` 事件可以直接在模板中指定当原
图加载失败时应展示的备选
图片地址[^2]：
```html
<template>
<div class="image-container">
<
img :src="imageSrc" alt="Default Image" onerror="this.onerror=null; this.src='fallback-image.jpg'"/>
</div>
</template>
<script>
export default {
data() {
return {
imageSrc: 'path/to/image'
}
}
}
</script>
```
此方法简单易行，并能有效防止因单张
图片加载失败而影响整个页面布局的效果。
#### 利用 CSS 后退机制设置
默认背景
图
对于某些特定场景下的头像
或其他小型
图标类别的
图片，还可以考虑采用纯CSS的方式来实现
加载失败后的视觉补偿效果。这种方式
不需要修改原有HTML结构，仅需调整样式表即可完成配置[^5]：
```css
.avatar {
width: 40px;
height: 40px;
position: relative;
}
.avatar::after {
content: "";
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: inherit;
height: inherit;
background-image: url("../assets/
img/default-avatar.png");
background-size: contain;
background-repeat: no-repeat;
opacity: 0;
transition: all ease-in-out .3s;
}
/* 当父元素内的实际内容为空白
或加载失败时 */
.avatar
img[src=""],
.avatar
img:not([src]):not(
img),
.avatar
img[alt],
.avatar
img:-webkit-broken,
.avatar
img:broken {
visibility: hidden !important;
}
.avatar
img + ::after {
opacity: 1;
}
```
上述代码片段展示了如何借助伪元素 `.avatar::after` 来作为后备选项，一旦检测到目标 `<
img>` 元素处于未定义状态
或是
加载过程中出现问题，则立即启用预设好的背景
图案代替之。
#### 动态重试
加载策略
考虑到网络状况
不佳可能导致部分
图片初次请求失败的情形，可以在应用层面加入一定的容错逻辑——即针对那些首次尝试下载却遭遇异常情况的对象实施有限次数范围内的重复拉取操作。这
不仅有助于提高最终呈现质量，同时也增强了系统的鲁棒性和适应能力[^3]。
```javascript
// 假定存在一个名为 retryLoadImage 的辅助函数用于执行具体的再试行为...
function retryLoadImage(element, maxRetries = 3) {
let retries = 0;
function attemptToReload() {
element.onload = null;
element.onerror = null;
if (retries++ >= maxRetries || document.hidden === true) {
console.warn(`Failed to load ${element.currentSrc} after ${maxRetries} attempts.`);
// 可在此处设定 fallback 行为，比如更换成
占位符
图形链接等。
return;
}
setTimeout(() => {
try {
const new
Img = new Image();
Object.assign(new
Img, {...element});
new
Img.onload = () => {
element.src = new
Img.src;
};
new
Img.onerror = attemptToReload.bind(null);
new
Img.src = element.src;
} catch (_) {}
}, Math.pow(2, retries)*1e3); // 实施指数级等待间隔以减少服务器压力
}
element.onerror = attemptToReload;
}
```
该 JavaScript 函数实现了对给定 DOM 节点对象（此处特指 `<
img>` 类型）的一系列异步轮询式刷新动作；每当发生一次
加载错误便启动新一轮计时器延迟后再次发起 HTTP 请求直至达到预定的最大重试上限为止。
本文探讨了前端开发中图片加载失败的三种解决方案，包括使用背景图、三元运算符和onerror属性。通过实际案例分析，展示了如何优雅地处理图片显示错误，提升用户体验。
扫一扫
1065
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
