推荐使用本地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:UsersNamePicturesphoto.jpg。
2、将其转换为URL格式：将反斜杠 替换为正斜杠 /，并在开头添加 file:///，得到：file:///C:/Users/Name/Pictures/photo.jpg。
3、在HTML中使用该路径：
。
4、注意：此方式在Chrome中通常被禁用，需启动浏览器时添加 –allow-file-access-from-files 参数才可能生效。
三、通过本地Web服务器提供图片服务
绕过浏览器对 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 即可正常显示图片。
四、使用Base64编码内联图片
将图片内容直接编码为文本字符串嵌入HTML中，完全避免外部路径依赖，适合小尺寸图片（如图标、logo），但会显著增大HTML体积，不适用于大图。
1、使用在线工具或命令行工具（如 base64 命令）将图片文件转换为Base64字符串。
2、复制生成的字符串（通常以 data:image/png;base64, 开头）。
3、在 标签中粘贴该字符串作为 src 值，例如：
。
4、Base64编码后的内容必须完整无换行、无空格，否则图片无法解析。
以上就是html如何放本地图片_将本地图片放入HTML页面显示【本地】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1604657.html
微信扫一扫 
支付宝扫一扫 
