打开HTML文件时Chrome图片不显示 报错net::ERR_FILE_NOT_FOUND

报错Failed to load resource: net::ERR_FILE_NOT_FOUND的核心是浏览器无法在你填写的路径下定位到对应图片资源，你可以按照以下步骤逐一排查：

• 核对大小写匹配情况：如果你的导师使用Windows设备开发，Windows文件系统默认不区分路径大小写，而Mac、Linux系统以及绝大多数线上服务器的文件系统严格区分大小写。比如代码中写的路径是src="assets/HeadImg.png"，但本地实际文件名为headimg.png，就会触发该报错。
• 核对路径基准目录：如果直接双击本地HTML文件用浏览器打开，图片路径是相对于HTML文件的本地存储位置；如果使用本地开发服务（如VS Code Live Server插件）启动项目，路径是相对于服务启动的根目录。比如你的项目结构为my-site/index.html、my-site/imgs/bg.jpg，若你在my-site的上层目录启动开发服务，路径解析时会多一层my-site前缀，导致资源匹配失败。
• 核对文件扩展名：检查本地图片的实际扩展名是否和代码中写的完全一致，比如实际文件为avatar.jpeg，但代码中写的是avatar.jpg，也会触发找不到资源的错误。
• 核对文件/文件夹命名：如果图片文件名或者上层文件夹名包含中文、空格、特殊符号，部分浏览器解析路径时会出现编码异常，导致无法定位资源，建议所有资源文件和文件夹统一使用英文、数字、下划线或短横线命名，不要出现空格、中文及其他特殊字符。

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