img标签引入路径正确的图片返回404(Not Found)报错如何解决

该404报错与引入的jQuery、Font Awesome依赖无关，核心触发原因是相对路径解析规则：
浏览器解析img标签的相对路径时，参考基准为当前地址栏打开页面的访问路径，而非存放公共菜单代码的片段文件路径。通过jQuery将菜单代码注入不同层级的HTML页面时，子目录下的页面会默认从自身所在目录检索图片，无法匹配存放在公共代码同目录的图片文件，最终返回404。
若本地调试正常、部署到服务器后才触发报错，还需排查文件名大小写问题：Windows本地环境不区分文件名大小写，Linux/Unix服务器则严格区分大小写，文件名拼写大小写不匹配也会直接返回404。

• 核对文件名：确认服务器上存储的图片文件名与代码中填写的fixTokenLogo.png大小写完全一致，排除拼写错误。
• 替换路径写法：将图片的相对路径改为根相对路径，一次性适配所有层级的页面。若图片存放在站点根目录，只需在路径开头加斜杠即可，修改后的img标签代码如下：

<img id="fix-token-logo" src="/fixTokenLogo.png" alt="FIX Token Logo">

路径开头的/代表从站点根目录开始检索资源，无论当前页面处于几级子目录下，都可以精准定位到根目录下的目标图片，不会出现路径偏移问题。

• 快速排查技巧：打开报404的页面按F12调出开发者工具，在「网络(Network)」面板找到加载失败的图片请求，查看其完整请求地址，与服务器上图片的真实存放路径做对比，即可快速定位路径偏移的具体问题。

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