如何用HTML将本地C盘图片插入网页？

浏览器出于安全限制，会阻止网页直接读取本地文件系统（比如C盘）里的资源，这就是你直接填本地路径不管怎么改斜杠都无效的原因。下面给你几个可行的解决办法：

• 将图片移入网页项目目录（推荐）
  把C盘的图片复制到你的网页项目文件夹里，比如创建一个images子目录存放图片，然后用相对路径引用：
  项目结构示例：

  my-web-project/
  ├─ index.html
  └─ images/
     └─ my-photo.jpg
  

  对应的HTML代码：

  <img src="images/my-photo.jpg" alt="我的图片">
  

  这种方式没有安全限制，而且网页部署到服务器后也能正常显示图片。

• 使用file://协议（仅本地测试用）
  如果不想移动图片，可以用file://协议指定本地路径，但注意这种方式只有你自己打开网页能看到，且部分浏览器会阻止访问：
  Windows系统下，把本地路径的反斜杠\改成正斜杠/，并且开头加上file:///（三个斜杠），比如C盘路径C:\Users\XXX\Pictures\test.jpg要改成：

  <img src="file:///C:/Users/XXX/Pictures/test.jpg" alt="本地图片">
  

  提示：Chrome等浏览器默认会阻止这种访问，你可能需要添加启动参数--allow-file-access-from-files才能生效，但不推荐长期这么做，存在安全风险。

• 搭建本地HTTP服务器
  用HTTP协议访问本地资源，绕过浏览器的文件系统限制。比如用Python快速搭建：

  1. 打开命令行，切换到你的网页项目目录
  2. 执行命令（Python 3）：python -m http.server 8000
  3. 在浏览器中访问http://localhost:8000，此时用相对路径引用图片就能正常显示，也可以通过服务器配置访问C盘文件，但更建议把图片移入项目目录。

内容的提问来源于stack exchange，提问作者Akash Rai