典型表现是图片不显示、控制台报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 原生 不支持内置 fallback（比如“图A加载失败就显示图B”），别指望靠 onerror 属性简单修好。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• onerror 只在 JS 启用且图片真正 404 时触发，但对 CORS 错误、MIME 类型不匹配等情况可能静默失败
• 用 onerror="this.src='fallback.png'" 有风险：如果 fallback 图也坏，会无限循环触发错误
• 真正健壮的做法是服务端统一处理（如 Nginx 配置 try_files），或前端用 fetch() 预检图片 URL 状态再决定渲染哪个 src
• CSS 的 background-image 也不解决语义问题——它没有 alt，对可访问性和 SEO 都不友好，别用来替代

现代项目里要注意构建工具对路径的重写

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 值，而不是开发时写的路径——那才是浏览器真正看到的

真正卡住人的往往不是语法，而是路径层级判断失误、alt 写成“图1”这种无效描述、或者构建后路径被悄悄改掉却没验证输出结果。多看一眼浏览器开发者工具里的“网络”和“元素”面板，比查十遍文档都管用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！