Angular应用本地图片无法显示求助：疑似文件结构问题

嗨！同为教师+开发者，我很懂你开发教学应用的需求，这就帮你捋清楚图片不显示的问题～

你遇到的核心问题确实是Angular的静态资源加载规则：Angular默认只会把src/assets目录下的文件当作静态资源处理，用ng serve运行时会把这些文件映射到应用的根路径；而你直接放在组件目录或者其他未配置目录里的images文件夹，Angular并不会把它纳入静态资源范围，所以浏览器找不到本地文件——而远程URL不受这个规则限制，自然就能正常显示。

给你两种靠谱的解决方案：

方案1：使用默认的assets目录（推荐） #

这是Angular官方推荐的静态资源管理方式，步骤简单省心：

• 把你的11451.png图片移动到src/assets/images目录下（如果没有images文件夹就新建一个）
• 修改组件里的img标签路径：

  <img src="assets/images/11451.png" alt="Test" width="84" height="120">
  

  或者用Angular的属性绑定语法（更符合框架规范）：

  <img [src]="'assets/images/11451.png'" alt="Test" width="84" height="120">
  

• 不需要重启ng serve，刷新页面就能看到图片了。

方案2：自定义静态资源目录（适合特殊场景） #

如果你一定要把图片放在组件目录下（比如每个组件的图片单独管理），可以修改Angular的配置文件：

1. 打开项目根目录下的angular.json文件
2. 找到projects -> 你的项目名 -> architect -> build -> options -> assets数组，添加你的图片目录路径，比如你的图片在src/app/student-details/images下，就改成：

   "assets": [
     "src/favicon.ico",
     "src/assets",
     "src/app/student-details/images"
   ]
   

3. 必须重启ng serve，因为修改angular.json后需要重新加载配置才能生效
4. 这时候你原来的路径./images/11451.png就能正常使用了，或者也可以用绝对路径/images/11451.png

另外提醒下：用ng build打包生产版本时，只有配置在assets里的目录才会被打包到dist文件夹里，所以不管用哪种方案，都要确保图片目录被正确配置哦～

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