图片不显示主因是src路径错误或缺失alt属性；src必须按html文件位置写相对路径（如"images/logo.png"），禁用本地绝对路径；alt需语义化描述，不可省略或堆砌关键词。
图片不显示？八成是 src 路径写错了，或者没填 alt 导致浏览器静默失败。别急着查兼容性或换格式，先确认路径基准和文件存在性。
img 标签的 src 路径怎么写才对
路径不是“看着像就行”，而是严格按 HTML 文件所在位置解析。比如你的 HTML 在 /project/index.html，图片在 /project/images/logo.png，那就必须写 src="images/logo.png" —— 不能写 src="/images/logo.png"（那是从网站根目录算起），也不能写 src="C:/project/images/logo.png"（浏览器拒绝 file:// 协议加载）。
- 相对路径最常用：
src="photo.jpg"（同目录）、src="assets/icon.svg"（子目录）、src="../shared/bg.webp"（上一级） - 绝对 URL 最省心：
src="https://cdn.example.com/pic.jpg"，但依赖外部服务稳定性 -
/开头的路径是服务器根路径，只在 Web 服务器（如 nginx、Apache）下有效；双击打开 HTML 文件时会失效 - 大小写敏感：Linux 服务器上
Photo.JPG≠photo.jpg，本地开发也建议统一小写
alt 属性不是可有可无的摆设
不写 alt，图片加载失败时页面就留个空框；写了但留空（alt=""）或堆砌关键词（alt="SEO优化图片高清下载免费"），反而干扰屏幕阅读器。它本质是语义占位符，不是装饰。
- 有意义的内容图：写具体描述，比如
alt="穿蓝衬衫的开发者正在调试代码" - 纯装饰图：用空字符串
alt=""，告诉辅助技术跳过 - 图标类小图：可简写，如
alt="搜索"、alt="关闭按钮" - 不写
alt会被 Lighthouse 等工具标为可访问性问题，部分浏览器也会默认禁用图片加载
width 和 height 属性现在还该用吗
用，但目的不是“控制大小”，而是防止布局偏移（CLS）。现代做法是用 CSS 控制样式，但保留这两个属性能提前告诉浏览器预留空间，避免图片加载后页面“抖动”。
- 写像素值即可：
width="600" height="400"，浏览器会按比例缩放，不强制拉伸 - 不要只写一个（比如只写
width），否则可能破坏宽高比或触发意外渲染 - 响应式场景下，配合
style="max-width:100%; height:auto;"更稳妥 - 如果图片尺寸动态变化（如用户上传），就别硬编码，改用 CSS aspect-ratio 或 JS 动态设置
base64 嵌入适合什么场景
只适合极小的图（
- 生成方式：命令行
base64 -i icon.png | tr -d '\n'，或在线工具 - 嵌入格式固定：
src="data:image/png;base64,iVBORw0KGgo..."，开头不能漏data:image/[type];base64, - 没有
alt就失去语义，必须补上；也无法被 CDN 缓存或单独调试加载失败原因 - 构建工具（如 Webpack/Vite）通常自动处理小图转 base64，手动写不如交给工具链
最容易被忽略的其实是路径基准点——不是浏览器地址栏当前路径，也不是项目根目录，而是 HTML 文件自身所在目录。改一个文件位置，所有相对 src 都得重算。调试时右键图片 → “在新标签页打开”，看 URL 是不是 404，比翻控制台更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
