Angular v18无法加载.jpg文件？图片显示异常技术咨询

问题场景 #

Angular v18项目中，将JPG和PNG格式图片都放在项目根目录的/public文件夹下，已通过angular.json配置该文件夹为资源目录：

"assets": [
  {
    "glob": "**/*",
    "input": "public"
  }
],

使用<img src="/Scree.png">能正常显示PNG图片，但换成JPG路径（如<img src="/Scree.jpg">）时，图片始终无法加载。

排查与解决步骤 #

• 核对文件名大小写
  Angular对资源文件名大小写敏感，确认JPG图片实际文件名（如Scree.jpg或Scree.JPG）与HTML中引用的路径完全一致，包括后缀字母大小写。

• 验证资源打包情况
  执行ng build后，检查dist目录下是否存在目标JPG文件；开发环境中可直接访问图片URL（如http://localhost:4200/Scree.jpg），若无法打开说明资源未被正确加载，需确认angular.json中input路径是否指向正确的public文件夹。

• 检查资源匹配规则
  虽然glob: "**/*"理论上包含所有文件，但可尝试显式添加JPG匹配规则排除潜在冲突：

  "assets": [
    {
      "glob": "**/*",
      "input": "public"
    },
    {
      "glob": "**/*.jpg",
      "input": "public"
    }
  ],
  

• 确认路径写法
  确保JPG图片路径正确：若图片在public子文件夹内（如public/images），路径应为/images/Scree.jpg；推荐使用以/开头的绝对路径，避免路由对相对路径解析的影响。

• 清除浏览器缓存
  按Ctrl+F5强制刷新页面，或在浏览器开发者工具中禁用缓存后重新加载，排除旧缓存导致的加载问题。

• 检查图片文件完整性
  确认JPG文件未损坏，可替换为一张已知正常的JPG图片进行测试，排除文件本身的问题。

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