HTML代码正确但图片不显示，Chrome本地打开时图片加载失败

你代码里img标签src属性开头的/是直接打开本地HTML时图片加载失败的核心原因。
路径开头的/代表引用目标为当前环境的根目录，两种打开方式下根目录的指向完全不同：

• 通过Live Server启动服务访问时：服务根目录为你在VS Code中打开的工作区文件夹，/ae24874dd301843548c034a3d2973658.png会被解析为工作区根目录下的对应图片，和你图片实际存放位置匹配，因此可以正常加载。
• 直接通过Chrome打开本地HTML文件时：浏览器会将路径开头的/解析为本地磁盘的根目录（Windows环境下为HTML文件所在磁盘的根目录，macOS/Linux环境下为系统根目录/），不会到HTML文件所在的同级目录查找图片，因此会出现图片破损的情况。

删除src属性值开头的/，使用相对路径引用同级目录下的图片即可，修改后的代码如下：

<img src="ae24874dd301843548c034a3d2973658.png" alt="" class="cat">

如果图片存放在HTML同级的images文件夹下，对应引用写法为src="images/图片文件名.png"，同样不要在路径开头添加/。
只要保持HTML文件和图片的相对存放位置不变，上述写法在本地直接打开、Live Server调试、线上部署的场景下都能正常加载图片。

内容的提问来源于stack exchange，提问作者Ninna Svanström