HTML图片无法显示问题求助（VS Code Live Server环境）

核心原因 #

文件名中的#是URL的锚点标识符，浏览器解析时会将#及其后面的内容视为页面内锚点，而非文件名的一部分。比如你写的图片路径car-images/gr3/BMW_M6_Tokyo_Expressway_-_East_Clockwise_#1.jpeg，实际浏览器请求的路径是car-images/gr3/BMW_M6_Tokyo_Expressway_-_East_Clockwise_，自然找不到对应的图片文件。

解决方案 #

方案1：重命名图片（推荐） #

直接移除文件名中的#符号，比如将BMW_M6_Tokyo_Expressway_-_East_Clockwise_#1.jpeg改为BMW_M6_Tokyo_Expressway_-_East_Clockwise_1.jpeg，同时同步更新HTML中的src属性：

<div class="image-container">
    <img src="car-images/gr3/BMW_M6_Tokyo_Expressway_-_East_Clockwise_1.jpeg" alt="A BMW M6 driving on Toyko Expressway">
    <img src="car-images/gr3/Ford_GT_Tokyo_Expressway_-_East_Clockwise_1.jpeg" alt="A Ford GT driving on Toyko Expressway">
    <img src="car-images/gr3/Ford_GT_Watkins_Glen_Long_Course_1.jpeg" alt="A Ford GT driving on the Watkins Glen Long Source">
    <img src="car-images/gr3/Lexus_Daytona_Road_Course_1.jpeg" alt="A Lexus RCF driving on the Daytona Road Course">
</div>

方案2：URL编码#符号 #

如果不想修改文件名，可将路径中的#替换为URL编码值%23，浏览器会正确识别为文件名的一部分：

<div class="image-container">
    <img src="car-images/gr3/BMW_M6_Tokyo_Expressway_-_East_Clockwise_%231.jpeg" alt="A BMW M6 driving on Toyko Expressway">
    <img src="car-images/gr3/Ford_GT_Tokyo_Expressway_-_East_Clockwise_%231.jpeg" alt="A Ford GT driving on Toyko Expressway">
    <img src="car-images/gr3/Ford_GT_Watkins_Glen_Long_Course_%231.jpeg" alt="A Ford GT driving on the Watkins Glen Long Source">
    <img src="car-images/gr3/Lexus_Daytona_Road_Course_%231.jpeg" alt="A Lexus RCF driving on the Daytona Road Course">
</div>

额外排查点 #

• 确认Live Server的根目录是否正确：检查VS Code中打开的文件夹是否是项目根目录，确保car-images文件夹直接在根目录下。
• 检查文件权限：从OneDrive拖拽的文件可能存在同步权限问题，右键图片文件，确保本地文件权限为可读。

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