img 标签的 src 必须为浏览器可访问的有效 URL，本地开发需用服务器而非双击打开，路径应基于 HTML 位置或根目录，alt 属性必须合理设置以保障可访问性。
img 标签的 src 属性必须是有效路径，不是文件名
浏览器加载 <img alt="html怎么用img添加图片_img标签插入图片路径【图像】" > 时只认 src 的值，它得能被浏览器“访问到”——也就是最终解析成一个可获取的 URL。本地开发时常见错误是写 src="photo.jpg"，但实际文件在 ./assets/photo.jpg，结果页面一片空白，控制台报 404。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 路径以
/开头表示从站点根目录找（如src="/images/logo.png"），确保服务器配置了对应静态资源路由 - 相对路径要基于当前 HTML 文件位置算起，不是基于 JS 或 CSS 文件
- 用开发者工具的 Network 面板点开失败的图片请求，看浏览器实际发的是什么 URL，比猜快得多
- 如果图片在子目录，别漏掉层级，比如 HTML 在
/blog/post.html，图在/blog/assets/cover.jpg，就得写src="assets/cover.jpg"，不是src="cover.jpg"
本地文件双击打开时 img 路径容易失效
直接双击 index.html 打开，浏览器地址栏显示的是 file:///xxx/index.html，这时 src="images/a.png" 会被解析为 file:///xxx/images/a.png —— 看似合理，但很多系统或安全策略会拦截跨目录读取，尤其 macOS 和新版 Chrome 对 file:// 协议限制更严。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 开发阶段务必用本地服务器跑，比如
npx serve、python3 -m http.server或 VS Code Live Server 插件 - 避免在
src里写绝对磁盘路径（如src="C:/project/img.jpg"），完全不可移植 - 如果真要离线使用，把图片转成 data URL（
src="data:image/png;base64,..."），但仅适合小图，大图会拖慢 HTML 加载
alt 属性不是可选项，而是可访问性刚需
很多人把 alt 当成“图片说明”，填个空或者随便写“图片”，但屏幕阅读器靠它向视障用户传达信息，搜索引擎也依赖它理解图片内容。不写 alt 或写成空字符串 alt=""，语义完全不同：前者是“此处有图，但无需描述”（如纯装饰图），后者是“此处有图，且无意义”，而缺失 alt 属性本身就会被读作“image”，非常干扰。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 功能性图片（如按钮图标、图表）写具体作用，比如
alt="提交表单"，而不是alt="箭头" - 纯装饰图用
alt=""（空字符串），不要删掉属性 - 含文字的截图类图片，alt 里写清文字内容，别只写“截图”
- VS Code 或 WebStorm 装插件（如 Auto Close Tag）可自动补全
alt，减少遗漏
图片加载失败时 fallback 处理很有限
<img alt="html怎么用img添加图片_img标签插入图片路径【图像】" > 没有内置的 onError 回退机制，onerror 事件虽能捕获，但触发后无法自动重试或换图，且在某些浏览器中可能不冒泡、不触发。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 简单 fallback 可用内联
onerror：<img src="a.jpg" onerror="this.src='placeholder.png'" alt="html怎么用img添加图片_img标签插入图片路径【图像】" >，但注意别形成死循环（比如 placeholder.png 也挂了） - 更稳的方式是用 JS 监听
load和error事件，统一管理降级逻辑，比如加载失败后插入一段文字提示 - CSS 里没法用
::after给<img alt="html怎么用img添加图片_img标签插入图片路径【图像】" >添加 fallback 文字，因为替换元素不支持伪元素；得用容器包裹再做样式 - 现代方案可考虑
<picture></picture>+<source></source>提供多格式/多尺寸，但 fallback 图仍需靠 JS 或服务端兜底
