上一篇
html图片src
HTML图片src属性用于指定图像文件路径，支持相对/绝对URL，常见格式如JPEG
HTML 图片src 属性详解
基本语法
src（source）属性用于指定图片文件的路径，是 <img> 标签的必需属性，语法格式如下：
<img src="图片路径" alt="描述文本">
- 路径类型：支持相对路径、绝对路径或网络URL。
- 引号：路径需用单引号 或双引号 包裹。
路径类型与示例
| 路径类型 | 示例 | 说明 |
|---|---|---|
| 相对路径 | images/photo.jpg | 相对于当前HTML文件的位置（如：同级目录或子目录）。 |
| 绝对路径 | /var/www/images/logo.png | 从服务器根目录开始的完整路径（不推荐，因部署路径可能变化）。 |
| 网络URL | https://example.com/img.png | 直接引用互联网图片（需确保链接有效且允许跨域访问）。 |
URL 格式规范
- 本地文件：路径区分大小写（尤其在Linux服务器上）。
- 网络资源：需包含协议（如
http://或https://）。 - 特殊字符：若路径含空格或特殊符号，需编码（如
%20表示空格）。
注意事项
- 文件扩展名：
- 常见支持格式：
.jpg,.jpeg,.png,.gif。 - 现代浏览器支持：
.webp,.svg（需浏览器兼容）。
- 常见支持格式：
- 路径错误：
- 文件不存在时,浏览器会显示“破损图片”图标。
- 相对路径错误可能导致图片无法加载（如目录层级混淆）。
- 安全性：
- 避免使用
javascript:等伪协议，防止XSS攻击。 - 网络图片需注意跨域权限（CORS）。
- 避免使用
常见问题与解答
问题1：图片路径正确但无法显示，如何解决？
解答：
- 检查文件名大小写（Linux系统敏感）。
- 确认文件实际存在于指定路径。
- 清除浏览器缓存（可能加载了旧资源）。
- 尝试使用绝对路径或根相对路径（如
/images/pic.jpg）。
问题2：哪些图片格式受浏览器支持？
解答：
- 广泛支持：
.jpg,.jpeg,.png,.gif。 - 现代格式：
.webp（需浏览器支持），.svg（内嵌矢量图，推荐）。 - 兼容性建议：提供多种格式备选（如
<picture>标签或
