HTML如何快速加载本地图片？

在HTML中加载本地图片是网页开发的基础需求，主要应用于两种场景：

1. 开发者本地资源引用（如网站图片素材）
2. 用户端图片预览（用户上传本地文件实时查看）
   本文将详解两种场景的实现方法、避坑技巧与最佳实践。

核心方法详解

▶ 方法1：开发者引用本地图片（静态路径）

通过<img>标签的src属性指定相对路径或绝对路径：

<!-- 同目录图片 -->
<img src="cat.jpg" alt="橘猫晒太阳">
<!-- 子目录图片 -->
<img src="images/dog.png" alt="金毛犬">
<!-- 上级目录图片 -->
<img src="../assets/bird.gif" alt="鹦鹉">

路径规则：
| 路径类型 | 示例 | 适用场景 |
|—————-|——————–|———————–|
| 相对路径 | images/photo.jpg | 项目内资源引用 |
| 绝对路径 | /static/logo.png | 明确根目录的固定资源 |
| 完整URL | file:///C:/photos/sky.png | 不推荐（浏览器安全限制） |

️ 重要提醒：直接使用file://协议在网页中加载本地文件会被浏览器拦截，需通过本地服务器（如Apache/Nginx）运行网页。

▶ 方法2：用户本地图片预览（动态加载）

通过JavaScript的FileReader API实现用户上传图片的即时预览：

<input type="file" id="uploader" accept="image/*">
<img id="preview" src="#" alt="预览图">
<script>
  document.getElementById('uploader').addEventListener('change', function(e) {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = function(event) {
      document.getElementById('preview').src = event.target.result;
    };
    reader.readAsDataURL(file); // 转换为Base64格式
  });
</script>

流程解析：

1. 用户选择图片 → 2. FileReader读取文件 → 3. 转Base64编码 → 4. 赋值给<img>

<script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.min.js"></script>
<script>
  // 读取图片EXIF信息并旋转
  EXIF.getData(file, function() {
    const orientation = EXIF.getTag(this, 'Orientation');
    // 根据orientation值调整CSS旋转角度
  });
</script>