在网页开发里，把本地图片放到页面上最常用的方法就是使用HTML的img标签。这个标签不需要闭合，通过src属性指向图片文件的位置，浏览器就能把图渲染出来。本地图片一般指和网页文件放在同一台电脑里的图像，可以是相对路径也可以是绝对路径。
一、IMG标签插入本地图片的基本写法
最简单的方式是把图片和html文件放在同一个文件夹，然后直接写文件名。下面代码演示了如何插入一张叫photo.jpg的本地图片：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>插入本地图片示例</title> </head> <body> <!-- src填写本地图片相对路径 --> <img src="photo.jpg" alt="风景照"> </body> </html>
如果图片在子目录里，比如images文件夹，src就写成images/photo.jpg。若使用绝对路径，在Windows下可写file:///C:/Users/test/photo.jpg，但这种方式只适合本地预览，发到网上别人打不开。
二、IMG标签常用属性设置
除了src，img标签还有几个属性对显示效果和兼容性很重要。下面列出常见属性及作用：
| 属性名 | 说明 | 示例 |
|---|---|---|
| src | 图片路径，必填 | src="images/a.png" |
| alt | 图片加载失败时的替代文字 | alt="logo" |
| width | 设置显示宽度，可用像素或百分比 | width="200" |
| height | 设置显示高度 | height="100" |
| title | 鼠标悬停提示文字 | title="点击查看" |
1. alt属性的必要性
alt不是可有可无。当图片地址写错或者网络异常，页面会显示alt里的文字，同时方便读屏软件理解内容。写代码时建议给每个<img>都加alt。
2. 控制图片尺寸
同时写width和height能避免页面抖动。如果不写，浏览器按原图大小显示，大图会撑破布局。下面例子把本地图限定为宽300高150：
<img src="images/photo.jpg" alt="示例" width="300" height="150">
三、相对路径常见的坑
新手常遇到图片不显示，多半是路径写错。规则是：./表示当前目录，../表示上一级目录。比如网页在admin/index.html，图片在根目录img/a.jpg，则应写../img/a.jpg。
- 图片名区分大小写，Photo.jpg和photo.jpg不同
- 不要写本地盘符路径发布到服务器
- 确认图片后缀和文件真实格式一致
四、用代码动态插入本地图片
有时需要用JavaScript把本地选中的图显示出来，可借助FileReader读文件。示例如下：
// 假设页面有个input和img
// <input type="file" id="file">
// <img id="view">
document.getElementById('file').onchange = function() {
var f = this.files[0];
var r = new FileReader();
r.onload = function(e) {
document.getElementById('view').src = e.target.result;
};
r.readAsDataURL(f);
};
这种方法不依赖服务器，适合做本地预览工具。掌握img标签属性和路径写法，插入本地图片就很轻松了。