核心问题：浏览器同源策略阻止本地文件加载 #

你用http-server搭建的是HTTP服务（访问地址是http://127.0.0.1:8080），但<img>标签里用了file://协议的本地路径——浏览器的同源安全策略会直接拦截这种跨协议的资源加载，这就是图片无法显示的根本原因，而且Chrome在这种场景下确实可能不会抛出明显报错。

解决步骤 #

1. 调整资源路径为HTTP服务可访问的相对路径

从你的http-server运行日志能看到，你是在C:\Users\Benjamin目录下启动的服务，这个目录就是HTTP服务的根目录（对应URL的/）。你的图片路径是C:/Users/Benjamin/Pictures/CII - Logo v6 - 2020-08-02 1219.PNG，所以在HTML里可以直接用以下相对路径：

<img src="/Pictures/CII - Logo v6 - 2020-08-02 1219.PNG" alt="CII Logo" width="104" height="142">

或者去掉开头的斜杠（效果一致，因为当前页面在根目录的子文件夹里）：

<img src="Pictures/CII - Logo v6 - 2020-08-02 1219.PNG" alt="CII Logo" width="104" height="142">

2. （更规范的做法）把资源放到网站专属目录并启动服务

为了避免路径混乱，建议把HTML文件和图片都放到C:/Users/Benjamin/Documents/CII - Website Files - 2020-08-29 2053目录下，然后切换到这个目录启动http-server：

cd "C:/Users/Benjamin/Documents/CII - Website Files - 2020-08-29 2053"
http-server

此时服务根目录就是这个网站文件夹，图片如果放在该文件夹里，直接用文件名即可：

<img src="CII - Logo v6 - 2020-08-02 1219.PNG" alt="CII Logo" width="104" height="142">

如果图片在该文件夹的Pictures子目录里，就用src="Pictures/CII - Logo v6 - 2020-08-02 1219.PNG"。

3. 额外注意事项

• 路径中的空格：虽然现代浏览器支持带空格的路径，但保险起见可以把空格替换为%20，比如src="Pictures/CII%20-%20Logo%20v6%20-%202020-08-02%201219.PNG"
• 确认http-server日志：当你访问页面后，查看http-server的日志，如果图片加载成功，会出现类似GET /Pictures/CII - Logo v6 - 2020-08-02 1219.PNG的记录；如果出现404，说明路径还是不对，需要检查目录结构是否匹配。

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