Angular 5中使用src属性无法显示图片问题求助

我之前在Angular项目里也踩过这种相对路径引用资源的坑！结合你的情况，问题出在Angular CLI的资源打包机制上，下面给你几个可行的解决办法：

1. 把图片移到src/assets目录（最推荐） #

Angular CLI默认会自动处理src/assets下的所有资源，构建时会把它们复制到输出目录，而且引用路径更简单：

• 把logo.jpg放到src/assets文件夹中
• 模板里改成这样引用：

  <img src="assets/logo.jpg">
  

  这样不管是开发环境还是生产构建，都能正常加载图片。

2. 修改Angular配置文件，手动包含外部资源 #

如果不想移动图片位置，可以修改.angular-cli.json（Angular 5用的是这个配置文件），让CLI打包时包含你的图片：

• 打开项目根目录下的.angular-cli.json
• 找到apps数组里的assets字段，把你的图片路径加进去。比如你的图片在项目根目录（和src同级），就添加"../logo.jpg"：

  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "../logo.jpg" // 添加这一行
      ],
      // 其他配置...
    }
  ]
  

• 保存配置后重启ng serve，然后模板里直接用<img src="logo.jpg">就能访问了（因为构建后图片会被复制到和index.html同级的目录）

为什么你的原路径不行？ #

Angular的开发服务器（ng serve）只会暴露src目录和配置中指定的资源路径，你用../../logo.jpg指向的是项目根目录的图片，但这个路径不在Angular的资源白名单里，所以服务器不会提供这个文件的访问，导致404。而placeholder.it是外部URL，不受这个限制，所以能正常显示。

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