推荐使用本地Web服务器方式显示本地图片，即通过http-server等工具启动localhost服务，再用相对路径引用图片，可绕过浏览器安全限制并确保兼容性。
如果您希望在HTML页面中显示存储在本地计算机上的图片，需要确保图片路径正确且符合浏览器的文件访问规则。以下是实现此目标的具体方法：
相对路径是相对于当前HTML文件所在位置来定位图片文件的方式，适用于将图片与HTML文件放在同一目录或子目录中。该方式兼容性好，部署方便，无需Web服务器即可在部分浏览器中预览（但受现代浏览器安全策略限制）。
1、将图片文件（例如 photo.jpg）与HTML文件保存在同一文件夹内。
2、在HTML文件中编写 标签，并设置 src 属性为图片文件名。
立即学习“前端免费学习笔记（深入）”；
3、示例代码：
。
4、若图片位于子文件夹中（如 images/photo.jpg），则写为：
。
绝对路径直接指向图片在操作系统中的完整位置，适用于快速测试，但存在跨平台和浏览器安全限制问题。Chrome、Edge等现代浏览器默认阻止通过 file:// 协议加载本地资源以防止信息泄露。
1、获取图片的完整本地路径，例如 Windows 下为：C:\Users\Name\Pictures\photo.jpg。
2、将其转换为URL格式：将反斜杠 \ 替换为正斜杠 /，并在开头添加 file:///，得到：file:///C:/Users/Name/Pictures/photo.jpg。
3、在HTML中使用该路径：
。
4、注意：此方式在Chrome中通常被禁用，需启动浏览器时添加 --allow-file-access-from-files 参数才可能生效。
绕过浏览器对 file:// 协议的限制，最可靠的方式是启动一个轻量级本地Web服务器，使HTML和图片均通过 http://localhost 访问，从而满足同源策略要求。
1、确保已安装 Node.js，然后在HTML所在目录打开终端。
2、执行命令安装静态服务器工具：npm install -g http-server。
3、在终端中运行：http-server，服务器默认启动在 http://localhost:8080。
4、将图片与HTML文件置于同一目录或合理子目录下，使用相对路径引用，例如：。
5、此时在浏览器中访问 http://localhost:8080/your-page.html 即可正常显示图片。
将图片内容直接编码为文本字符串嵌入HTML中，完全避免外部路径依赖，适合小尺寸图片（如图标、logo），但会显著增大HTML体积，不适用于大图。
1、使用在线工具或命令行工具（如 base64 命令）将图片文件转换为Base64字符串。
2、复制生成的字符串（通常以 data:image/png;base64, 开头）。
3、在 标签中粘贴该字符串作为 src 值，例如：
。
4、Base64编码后的内容必须完整无换行、无空格，否则图片无法解析。
以上就是html如何放本地图片_将本地图片放入HTML页面显示【本地】的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
566
收藏
