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。中文同理，可能变成乱码或被截断。

实操建议：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 文件名和路径全部用小写字母 + 短横线，比如 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 和图像内容。其他所有属性，都是在它出问题时帮你少丢点用户体验。