img 标签的 src 属性必须是有效可访问的 URL，常见问题源于路径错误而非语法错误；应以 HTML 文件位置为基准构建相对路径，避免空格、中文及反斜杠，推荐使用小写字母加短横线命名并用本地服务器测试。
img 标签的 src 属性必须是有效可访问的 URL
直接写 src="图片文件名.jpg" 往往不显示，不是语法错，而是路径没对上。浏览器拿到 src 后会按当前 HTML 文件的位置为基准去拼接请求地址，不是按你“以为的”位置。
常见错误现象：404 Not Found、控制台报 Failed to load resource、页面只显示缺图图标。
- 如果 HTML 和图片在同一目录，用
src="logo.png"即可 - 如果图片在子目录
images/下，写src="images/photo.jpg" - 如果 HTML 在
/pages/index.html，图片在/assets/icon.svg，要用相对路径src="../assets/icon.svg"或绝对路径src="/assets/icon.svg" - 本地双击打开 HTML 文件（
file://协议）时，部分浏览器会限制加载本地图片，建议用本地服务器（如 Python 的python -m http.server）测试
路径里带空格或中文要小心
URL 中空格会被转义成 %20，有些服务器或本地文件系统不处理得当，直接导致 404。中文同理，可能变成乱码或被截断。
实操建议：
- 文件名和路径全部用小写字母 + 短横线，比如
user-avatar.png，别用用户头像.jpg - 实在要用中文，先手动在浏览器地址栏粘贴完整
src值，看能不能直接打开图片——打不开就说明路径本身就有问题 - 避免在路径中使用
\（Windows 风格），一律用/，HTML 规范只认正斜杠
src 值不是路径也能用，但要注意场景
src 支持 data URL、base64 编码、甚至 SVG 字符串，但它们有明确适用边界：
- 小图标（src="data:image/svg+xml;base64,PHN2Zy..."，省 HTTP 请求，但增大 HTML 体积
- 临时调试可写
src="https://via.placeholder.com/200"占位，但上线前必须换真实资源 - 不要把大图 base64 进 HTML，会导致首屏渲染变慢，且无法被浏览器缓存
-
src不能是 JavaScript 变量名或表达式，比如src=myImgPath不生效，必须是字符串字面量或通过 JS 动态赋值：img.src = myImgPath
alt 和 loading 属性不是可选，而是关键体验补丁
很多人只盯着 src，结果图没加载出来就一片空白。其实 alt 和 loading 能显著改善实际表现：
-
alt不只是 SEO，屏幕阅读器靠它读图，图片加载失败时也会显示该文本——务必写有意义的内容，别填alt=""或alt="图片" -
loading="lazy"对非首屏图很实用，能减少初始请求数，但 Safari 旧版不支持；首屏大图建议去掉 lazy，否则可能触发 FOUC（闪动） - 不要依赖
onerror写内联 JS 来 fallback，可维护性差；更稳妥的是用 JS 监听error事件后替换src，或服务端统一做 404 重定向
路径是否正确，最终只取决于浏览器发起的那个 HTTP 请求地址是否返回 200 和图像内容。其他所有属性，都是在它出问题时帮你少丢点用户体验。
