Bootstrap导航栏添加logo后图片无法加载如何解决？

排查步骤 #

1. 修正图片引用路径（最高发原因） #

你当前代码中<img>标签的src属性为src="PVPLogo.PNG"，属于相对路径，浏览器会默认从当前HTML文件的同级目录查找图片，而你的图片存放在App > Images目录下，需要根据你的项目文件结构调整路径：

• 若当前HTML文件放在App根目录，路径修改为：src="./Images/PVPLogo.PNG"
• 若当前HTML文件放在App的子目录（例如App > Pages），路径修改为：src="../Images/PVPLogo.PNG"（../代表返回上一级目录，层级不够可叠加）
• 测试阶段也可以直接使用绝对路径：src="/Images/PVPLogo.PNG"，绝对路径从项目根目录开始查找，不受当前HTML文件位置影响

2. 核对文件名大小写 #

Windows系统对文件名大小写不敏感，但Mac、Linux以及绝大多数线上部署服务器都区分大小写。需要确认代码中写的PVPLogo.PNG和实际文件的名称、后缀大小写完全一致，比如实际文件后缀是小写的.png，代码里写大写.PNG就会加载失败。

3. 检查静态资源访问权限 #

如果你使用的是带框架的项目（比如ASP.NET、Vue、React等），需要确认Images目录已经被配置为允许访问的静态资源目录，没有被项目的权限规则、路由规则拦截。

4. 浏览器控制台定位具体问题 #

打开页面后按F12调出开发者工具，切换到「控制台」标签，刷新页面后如果看到图片请求的404报错，点击报错链接就能看到浏览器实际尝试请求的图片地址，对比这个地址和你图片的实际存放位置，就能快速找到路径配置错误的地方。

优化建议 #

可以给<img>标签补充alt属性，示例如下：

<img src="./Images/PVPLogo.PNG" width="40" height="40" class="d-inline-block align-top" alt="站点Logo">

alt属性既符合网页无障碍规范，图片加载失败时也会显示属性内的文字，方便你快速判断是图片加载问题还是标签渲染问题。

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