HTML5显示图片有三种方法：一、用<img>标签src属性加载本地或网络图片，需设相对/绝对路径及alt文本；二、用FileReader API读取用户选择的文件并转为Data URL动态显示；三、用URL.createObjectURL()创建临时URL预览图片，需配合revokeObjectURL释放内存。
如果您希望在网页中显示图片，HTML5 提供了多种方式加载和呈现本地图像文件。以下是实现该目标的具体方法：
一、使用 <img> 标签通过 src 属性引入网络或本地路径图片
此方法适用于已知图片路径的静态资源加载，浏览器直接根据 src 值发起请求并渲染图像。需确保路径可访问且格式被支持。
1、在 HTML 文件中插入 <img> 标签，并设置 src 属性为图片的相对或绝对路径。
2、若图片位于同一目录下，src 值可写为 "photo.jpg"；若在子目录 images 中，则写为 "images/photo.png"。
立即学习“前端免费学习笔记（深入）”；
3、添加 alt 属性以提供替代文本，例如：alt="风景照片"。
二、使用 JavaScript FileReader API 读取用户选择的本地图片文件
此方法允许用户通过文件输入控件选择设备中的图片，由浏览器在客户端解析为 Data URL 并动态显示，不涉及服务器传输。
1、在页面中添加 <input type="file" accept="image/*"> 元素，限制仅可选择图片文件。
2、为该元素绑定 change 事件监听器，获取用户选中的 File 对象。
3、创建新的 FileReader 实例，调用 readAsDataURL() 方法读取文件内容。
4、在 FileReader 的 onload 回调中，将 result 属性值赋给 <img> 元素的 src 属性，例如：imgElement.src = reader.result。
三、使用 URL.createObjectURL() 创建临时对象 URL 显示本地图片
该方式通过浏览器生成指向本地 File 对象的临时 URL，比 FileReader 更轻量，适合快速预览，但需注意手动释放内存。
1、同样使用 <input type="file"> 获取用户选择的图片文件。
2、调用 URL.createObjectURL(file) 生成唯一临时 URL。
3、将生成的 URL 赋值给 <img> 标签的 src 属性，例如：img.src = url。
4、在不再需要该图片时，调用 URL.revokeObjectURL(url) 释放引用，避免内存泄漏。
