Angular 4项目中本地图片资源路径引用问题咨询

嘿，我看你正在用Angular 4搭建项目，在app.component.ts的联系人数组里引用assets文件夹的图片对吧？这里给你纠正下路径的写法，避免出现图片加载失败的问题。

先确认下你的目录结构是这样的：

src
├── app
│   ├── app.component.ts
│   ├── app.component.html
│   └── ...
└── assets
    ├── robbie.jpg
    └── ...

你当前用的../assets/robbie.jpg是相对路径，这种写法在Angular项目里很容易出问题——比如当项目构建打包后，或者组件所在目录结构调整时，路径解析会出错，导致图片找不到。

正确的引用方式 #

直接使用以assets/开头的绝对路径就可以了，Angular会自动处理资源的映射：

export class AppComponent {
  // 联系人对象数组
  contacts = [
    { 
      name: "Robbie Peck", 
      image: "assets/robbie.jpg", 
      email: "XXXXXXXX", 
      phone: "XXXXXXXXX"
    }
    // 可以继续添加其他联系人
  ];
}

原理说明 #

Angular的构建工具（比如Webpack）在打包时，会把assets目录下的所有资源复制到最终的dist文件夹中，并且保持assets的目录结构。使用assets/robbie.jpg这种绝对路径，相当于告诉Angular从项目的资源根目录去查找图片，不管你的组件在哪个层级，都能精准定位到资源。

模板中渲染的正确写法 #

如果要在app.component.html里展示这些图片，直接用属性绑定即可：

<div *ngFor="let contact of contacts">
  <img [src]="contact.image" alt="{{contact.name}}">
  <h3>{{contact.name}}</h3>
  <p>邮箱：{{contact.email}}</p>
  <p>电话：{{contact.phone}}</p>
</div>

这样调整后，你的图片应该就能正常加载啦！

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