VS Code使用Live Server运行HTML时相对路径图片无法显示

• Live Server启动的静态服务，是以你在VS Code中打开的项目文件夹作为服务根目录解析所有相对路径的，不会读取你电脑磁盘的根目录。你当前写的src="D/image.JPG"，实际请求的是「项目根目录下D文件夹内的image.JPG」，不是你电脑D盘里存储的图片文件。
• 浏览器有安全同源限制，通过HTTP服务访问页面时，直接引用磁盘盘符开头的本地文件路径会被拦截，就算路径写对了也无法正常加载。
• Live Server的路径解析严格区分大小写，如果你的实际图片文件后缀是小写.jpg，代码里写大写.JPG也会触发404找不到资源的错误。

• 先整理项目文件结构：把需要引用的image.JPG移动到你当前打开的HTML项目目录内，不要把静态资源放在项目文件夹外。可以单独新建images文件夹统一存放图片资源，方便管理。
• 根据图片和当前HTML文件的相对位置写引用路径：
  • 图片和HTML文件在同一级目录：直接写src="image.JPG"
  • 图片存放在同级的images文件夹下：写src="images/image.JPG"
  • 图片存放在HTML文件上一级目录的资源文件夹中：写src="../assets/image.JPG"
• 核对路径里的文件名、后缀大小写，和本地实际文件完全保持一致，避免大小写不匹配导致的加载失败。

<img 
        src="image.JPG"
        width="100"
        alt="Photo">

快速避坑技巧：在VS Code左侧资源管理器面板里，直接把目标图片拖拽到HTML代码的对应位置，编辑器会自动生成符合规则的相对路径，不用手动拼写减少出错。

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