典型表现是图片不显示、控制台报404或仅留空白占位框；修复需确认相对路径以HTML文件为基准（如src="../assets/logo.png"）、优先用根目录绝对路径（src="/assets/logo.png"）、检查扩展名与大小写，并用开发者工具Network面板验证实际请求。
img src路径写错的典型表现和修复方式
浏览器里图片不显示，控制台报 404 或空白占位框，大概率是 src 路径错了。不是“找不到图”，而是“根本没发对请求”。
- 相对路径以当前 HTML 文件位置为基准，比如 HTML 在
/pages/index.html，想引用/assets/logo.png，就得写src="../assets/logo.png"（不是从网站根目录算） - 用绝对路径更稳：以
/开头（如src="/assets/logo.png"），表示从站点根目录开始找，和 HTML 存放位置无关 - URL 中不要漏掉扩展名，
logo和logo.png是两个不同资源；大小写敏感，Logo.png在 Linux 服务器上就加载失败 - 开发时用浏览器的“网络”面板看实际发出的请求地址，比猜路径快得多
alt属性不是可填可不填的装饰项
alt 是图片的文本替代内容，不是“说明文字”，它在多个关键场景下直接决定功能是否可用。
- 屏幕阅读器完全依赖
alt向视障用户描述图片，空字符串alt=""表示“该图无信息价值”（如纯装饰性分割线），但alt缺失则会被朗读成“图片”或文件名，造成干扰 - 图片加载失败时，浏览器会显示
alt文本，这是用户唯一能获取的信息来源 - 搜索引擎把
alt当作图片内容的重要信号，影响 SEO，但堆砌关键词（如alt="red shoes buy now cheap shoes online"）会被判定为作弊 - 真实场景中，功能性图标（如“删除”按钮用的垃圾桶图）必须写
alt="删除"，不能只写alt="trash"或留空
img加载失败时的 fallback 处理很有限
HTML 原生 <img alt="HTML中img路径设置 HTML中img标签alt属性重要性" > 不支持内置 fallback（比如“图A加载失败就显示图B”），别指望靠 onerror 属性简单修好。
-
onerror只在 JS 启用且图片真正 404 时触发，但对 CORS 错误、MIME 类型不匹配等情况可能静默失败 - 用
onerror="this.src='fallback.png'"有风险：如果 fallback 图也坏，会无限循环触发错误 - 真正健壮的做法是服务端统一处理（如 Nginx 配置
try_files），或前端用fetch()预检图片 URL 状态再决定渲染哪个src - CSS 的
background-image也不解决语义问题——它没有alt，对可访问性和 SEO 都不友好，别用来替代<img alt="HTML中img路径设置 HTML中img标签alt属性重要性" >
现代项目里要注意构建工具对路径的重写
Webpack/Vite 等工具会自动处理 src 中的静态资源路径，但规则容易混淆。
立即学习“前端免费学习笔记（深入）”；
- 在 Vite 中，放在
public/下的文件（如public/logo.png）需用绝对路径src="/logo.png"；而放在src/assets/下的，要用src={import('./logo.png')}（JSX）或src="./logo.png"（配合vite-plugin-html等插件） - Webpack 的
file-loader或asset-module会把图片哈希化，直接写死src="logo.png"会导致部署后 404 - 检查最终生成的 HTML 源码里的
src值，而不是开发时写的路径——那才是浏览器真正看到的
