Angular 18图片无法显示问题求助：启动网站仅显示alt文本

以下是几个能快速定位问题的实操步骤，亲测解决过类似官方项目也无法加载图片的情况：

• 检查静态资源配置与路径
  Angular 18默认将src/assets作为静态资源目录，引用图片时优先用根路径开头的写法：<img src="/assets/your-image.png" alt="desc">。如果自定义了资源目录，打开angular.json确认assets数组里包含目标目录，比如：

  "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/custom-images" // 自定义的图片目录
  ]
  

• 清理构建缓存
  ESBuild的缓存机制偶尔会导致资源加载异常，执行命令清理后重启服务：

  ng cache clean
  ng serve
  

• 查看浏览器控制台的请求状态
  按F12打开开发者工具，切换到Network标签，刷新页面看图片的请求结果：

  • 若显示404：说明路径错误或资源未被正确打包，回到第一步检查配置
  • 若有其他错误：比如资源加载被拦截，检查本地开发服务的防火墙或代理配置（官方项目大概率不会出现）

• 验证Node.js版本
  Angular 18要求Node.js版本≥18.19.0或≥20.9.0，版本过低会导致构建过程中资源处理异常，执行node -v查看版本，不符合则升级。

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