在HTML网页开发里，向页面中添加图像主要有两种方式，一种是使用<img>标签直接嵌入内容图片，另一种是利用CSS的background相关属性设置背景图像。同时，图片能否正常显示，很大程度上取决于src或url中路径的引用是否正确。
一、使用img标签插入图片
<img>是一个空标签，不需要闭合，核心属性是src用来指定图片地址，alt用于在图片无法显示时提供替代文本。基本写法如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>img示例</title>
</head>
<body>
<!-- 插入同一目录下的图片 -->
<img src="logo.png" alt="网站标志" width="200">
<!-- 插入子目录中的图片 -->
<img src="images/photo.jpg" alt="照片">
<!-- 插入网络图片 -->
<img src="https://ipipp.com/demo.png" alt="演示">
</body>
</html>
img标签常用属性
- src：图片路径，必填
- alt：替代文本，利于无障碍访问
- width/height：设置显示尺寸
- title：鼠标悬停提示
二、使用CSS插入背景图
背景图通过CSS的background-image属性添加，常用于装饰性图像，不占据文档流空间。
/* 相对路径引用 */
.box {
width: 300px;
height: 200px;
background-image: url("images/bg.png");
background-repeat: no-repeat;
background-size: cover;
}
/* 绝对网络路径 */
.header {
background: url("https://ipipp.com/top.jpg") center / cover no-repeat;
}
三、路径引用方法
路径分为相对路径和绝对路径，理解它们能减少图片破图问题。
| 类型 | 写法示例 | 说明 |
|---|---|---|
| 同级相对 | src="pic.png" | 图片与HTML同目录 |
| 子目录相对 | src="img/pic.png" | 图片在HTML下级img文件夹 |
| 上级相对 | src="../pic.png" | 返回上一级目录查找 |
| 绝对路径 | src="https://ipipp.com/pic.png" | 完整网络地址或盘符路径 |
路径选择建议
本地项目开发推荐使用相对路径，方便整体迁移；引用第三方素材可使用绝对路径。
四、常见问题
当图片不显示时，先检查路径拼写、文件名大小写，以及服务器是否限制访问。使用浏览器开发者工具查看网络请求是最直接的排查方式。
// 简单检测图片是否加载失败
var img = document.createElement('img');
img.src = 'missing.png';
img.onerror = function() {
console.log('图片加载失败，请检查路径');
};
掌握<img>标签、background属性与路径规则，就能在HTML中稳定插入各类图片。
HTML_imgbackground_imagepath_reference修改时间：2026-07-27 16:03:22