图片路径须用相对路径或网络地址,禁用本地绝对路径;alt属性必填且需准确描述内容;通过浏览器控制台404报错可快速定位路径错误。

图片路径写错:浏览器显示空白或小图标
本地图片不会自动出现在网页里,必须用 标签明确告诉浏览器“去哪找这张图”。最常见错误是路径写成电脑上的绝对路径(比如 C:\Users\Name\Pictures\photo.jpg),这在网页中完全无效——浏览器只认相对路径或网络地址。
- 把图片和 HTML 文件放在同一个文件夹里,就直接写文件名:

- 如果图片在子文件夹
images/下,路径写成:
- 如果 HTML 在子文件夹里,而图片在上一级,用
../回退:
- 路径区分大小写(尤其部署到 Linux 服务器后),
Cat.jpg和cat.jpg是两个文件
alt 属性不是可选项,而是必填项
alt 不只是“备用文字”,它影响可访问性、SEO 和图片加载失败时的兜底展示。不写 alt 或留空(alt="")会让屏幕阅读器跳过该元素,也可能被搜索引擎降权。
- 描述图片内容,不是“图片”“一张图”这种废话:
alt="橘猫蹲在窗台上看雨" - 纯装饰图才用空字符串:
alt="",但要确认它真不传递信息 - 别把关键词堆砌进去,比如
alt="猫 照片 免费 图片 下载"—— 浏览器和读屏软件都会念出来,很干扰
图片没显示?先检查控制台报的 404 错误
右键网页 → “检查” → 切到 Console 或 Network 标签页,刷新页面。如果看到类似 GET file:///.../cat.jpg 404 (Not Found) 的报错,说明路径错了,不是代码语法问题。
LANUX V1.0 蓝脑商务网站系统 适用于网店、公司宣传自己的品牌和产品。 系统在代码、页面方面设计简约,浏览和后台管理操作效率高。 此版本带可见即可得的html编辑器, 方便直观添加和编辑要发布的内容。 安装: 1.解压后,更换logo、分类名称、幻灯片的图片及名称和链接、联系我们等等页面。 2.将dbconfig.php里面的数据库配置更改为你的mysql数据库配置 3.将整个文件夹上传至
- 浏览器地址栏显示的是
file:///开头?说明你双击 HTML 文件直接打开了——这时所有路径都基于本机文件系统,不能跨盘符,也不能用http://协议 - 想用
http://加载本地图?不行。要么起个本地服务(如 Python 的python -m http.server),要么把图传到图床 - 中文文件名容易出问题,建议全用英文+数字重命名图片,比如把
我的猫.jpg改成my-cat.jpg
宽高属性写不写,对布局影响很大
不设 width 和 height,浏览器要等图片下载完才知道尺寸,可能引发页面“抖动”(内容突然下移)。现代做法是用 CSS 控制,但内联属性仍有效且简单。
立即学习“前端免费学习笔记(深入)”;
- 直接写像素值:

- 只设一个(比如
width),高度会等比缩放,避免变形 - 用 CSS 更灵活:

- 注意:HTML 的
width/height是纯数值,不带单位;CSS 里必须写px或%
404 报错,再核对一次文件位置,90% 的问题当场解决。









