Angular CLI v6.0.5图片加载失败求助（原代码在Quickstart可用）

问题原因分析 #

你遇到的这个问题，核心是Angular Quickstart和Angular CLI的静态资源处理机制完全不同：

• Angular Quickstart是简易入门模板，没有严格的资源打包规则，浏览器能直接从文件系统读取app/images下的图片；
• 而Angular CLI基于Webpack构建，有默认的静态资源管理策略：只有配置在angular.json里的资源目录，才会在构建时被复制到输出目录（dist文件夹），浏览器才能访问到。默认情况下CLI仅把src/assets和src/favicon.ico标记为可访问静态资源，你的app/images目录不在这个范围内，构建后图片未被打包，自然无法加载。

解决方案（两种可选） #

方案1：调整图片存放路径（推荐）

这是Angular CLI的标准实践，把图片放到默认静态资源目录下：

1. 在src目录下创建（若不存在）assets/images文件夹，将1.jpg移入；
2. 修改app.component.ts里的图片路径：

export class AppComponent { 
  appList: any[] = [ 
    { 
      "ID": "1", 
      "url": 'assets/images/1.jpg', // 更新路径
      "height": "30", 
      "width":"40", 
      "align":'left' 
    }
  ];
}

3. 重启ng serve，刷新浏览器即可看到图片。

方案2：修改Angular CLI的资源配置

若不想移动图片，可通过修改angular.json将app/images目录纳入静态资源列表：

1. 打开项目根目录下的angular.json文件；
2. 定位到projects -> 你的项目名称 -> architect -> build -> options -> assets数组；
3. 在数组中添加"src/app/images"，修改后示例如下：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/app/images" // 新增该行
]

4. 重启ng serve或重新执行ng build，图片即可正常加载。

验证方法 #

修改完成后执行ng build命令，查看dist目录：

• 方案1下，dist/assets/images/1.jpg应存在；
• 方案2下，dist/app/images/1.jpg应存在。

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