Angular12网站导航栏添加logo图片不显示如何解决

问题核心原因 #

Logo加载失败大概率是资源路径配置错误导致的，和你当前写的尺寸样式没有直接关系，具体修复步骤如下： #

1. 修正图片引用路径 #

你当前HTML里写的路径是错误的：

<!-- 错误写法：/src是源码目录，构建后不会出现在站点根路径 -->
<img src="/src/assets/images/Nikiikejks.png" alt="">

Angular在构建时会把angular.json中配置的src/assets目录下的所有资源，直接输出到打包产物的根目录assets文件夹下，不会保留src这层路径，正确写法如下：

<!-- 正确相对路径写法 -->
<a class="navbar-brand" routerLink=""><img src="assets/images/Nikiikejks.png" alt="站点Logo"></a>

如果你的项目后续可能部署在站点子路径下，推荐用Angular的属性绑定写法写资源路径，避免部署后路径解析异常：

<a class="navbar-brand" routerLink=""><img [src]="'assets/images/Nikiikejks.png'" alt="站点Logo"></a>

2. 校验文件与配置 #

路径改完如果还是不显示，逐一核对以下项：

• 确认图片文件真实存放位置为src/assets/images/Nikiikejks.png，没有放错目录
• 确认文件名、后缀大小写完全匹配：Angular构建环境对文件名大小写敏感，比如实际文件叫nikiikejks.png、Nikiikejks.PNG都会导致404加载失败
• 打开angular.json文件，确认build -> options -> assets数组中包含了src/assets配置，默认配置如下，如果缺失手动补上：

"assets": [
  "src/favicon.ico",
  "src/assets"
]

3. 样式优化（避免图片显示异常） #

你当前写的Logo样式基本可用，补充两个属性防止图片被拉伸、挤压或者被父容器裁切，修正后的CSS如下：

.navbar-light .navbar-nav .nav-link
{
  color: var(--secondary-color);
}
.navbar-light .navbar-nav .nav-link.active-link
{
  color: #64cff7;
}
.navbar
{
  background-color: #f7dfde;
  box-shadow: 0px 2px 5px #777 ;
}
.navbar-brand {
  width:150px;
  font-size: 24px;
  /* 补充分类对齐，避免图片和文字错位 */
  display: flex;
  align-items: center;
}
.navbar-brand img {
  height: 30px;
  width: auto; /* 宽度自适应，避免图片变形 */
  object-fit: contain; /* 保证图片完整显示在容器内 */
  margin-right: 7px;
}

验证方法 #

修改完成后打开浏览器开发者工具，切换到Network面板刷新页面：

• 如果图片请求返回404：说明路径还是不对，看请求的实际URL地址，对照调整即可
• 如果图片请求返回200但不显示：切换到Elements面板选中img标签，查看计算样式，排查是否有其他样式把图片宽高设为0、或者加了display: none属性

内容的提问来源于stack exchange，提问作者Ján Andrejko