Live Server无法加载图片但手动打开index.html文件时图片正常显示

该问题是本地文件协议（file://）和Live Server启动的HTTP服务的路径解析逻辑差异导致的：
Live Server启动时会将你当前在编辑器中打开的文件夹作为HTTP服务的根目录，HTTP服务默认不允许访问根目录层级以上的本地文件。你代码中写的相对路径../E-commerce/IMG/Soccer.jpeg在服务环境下会尝试跳出服务根目录查找文件，被拦截后就会返回404导致图片加载失败。
而手动打开本地HTML文件走的是file协议，可直接读取本地磁盘的完整相对路径资源，所以图片可以正常加载。

相关页面代码参考：

<div class="slide__Show1">
       <h2>It's More Than Just A Sport</h2>
       <p>Get back on the field in style!</p>
       <img src='../E-commerce/IMG/Soccer.jpeg'>
</div>

• 调整编辑器工作区目录：直接将你的项目根目录（即上述的E-commerce文件夹）作为编辑器的工作区根目录打开，再重启Live Server
• 修正图片相对路径：根据HTML文件的存放位置调整src路径，如果HTML文件存放在E-commerce根目录下，直接将路径修改为./IMG/Soccer.jpeg即可；如果HTML存放在E-commerce的子文件夹中，对应调整相对层级即可，比如存放在page子文件夹下就写成../IMG/Soccer.jpeg
• 排查验证：按F12打开浏览器开发者工具，切换到Network面板刷新页面，查看图片请求的实际路径，对比本地文件的实际存放路径即可快速定位路径匹配问题

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