alt属性本身不自动显示为可见文字，仅用于语义描述；需通过css伪元素（如::after）或onerror事件主动实现页面可见占位。
alt 属性本身不会在图片加载失败时自动显示为页面上的可见文字，它只是语义描述，专为屏幕阅读器、搜索引擎和纯文本环境服务。本地图片加载失败（比如路径写错、文件不存在、大小写不匹配、未启动本地服务器等），浏览器默认只显示一个“断裂图标”，而不会把 alt 文字渲染出来。
想让用户在页面上看到提示文字，需要额外干预。以下是几种实用、可靠的方式：
✅ 正确设置 alt 是前提，不是可选项
-
<img src="photo.jpg" alt="一张户外风景照">中的alt必须存在且有意义 - 本地开发时常见错误：
src=""、src="undefined"、src="./images/photo.JPEG"（但实际是.jpeg）——这些会导致浏览器根本不触发加载逻辑，alt也无效 - 装饰性图必须写
alt=""，不能省略或写成alt=" "
✅ 让 alt 文字真正“看得见”的两种主流方式
1. 用 CSS + ::after 伪元素强制显示 alt 内容
适合静态页面、对 JS 依赖低的场景：
@@##@@
配 CSS：
img {
position: relative;
display: inline-block;
}
img::after {
content: attr(alt);
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #f9f9f9; color: #666;
font-size: 12px; padding: 4px;
display: flex; align-items: center; justify-content: center;
text-align: center;
overflow: hidden;
}
/* 加一层兜底：src为空或非法时也显示 */
img:not([src]), img[src=""], img[src^="data:"], img[src*="file://"] {
visibility: hidden;
}
img:not([src])::after, img[src=""]::after {
content: "图片路径无效";
}
⚠️ 注意：需显式设置宽高（或 aspect-ratio），否则伪元素可能不可见。
2. 用 onerror 事件替换为纯文本或占位图
更精准响应真实加载失败，推荐用于本地调试：
@@##@@⚠️ ' + this.alt + '';" >
或更稳妥地换为内联 SVG 占位（不依赖网络/路径）：
@@##@@
✅ 本地开发特别提醒
- 浏览器直接双击打开 HTML 文件（
file://协议）时，部分onerror行为不稳定，建议用轻量服务器启动（如 VS Code 的 Live Server 插件） - 检查控制台 Network 标签页：看到
404就说明路径错了，别急着加onerror，先修路径 - Linux/macOS 下注意文件名大小写：
IMG.PNG≠img.png
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
