图像未显示在我的角度应用程序中答案

【问题标题】：Images are not being displayed in my angular application图像未显示在我的角度应用程序中
【发布时间】：2019-10-27 06:52:53
【问题描述】：

早些时候，我的 typescript 版本（“typescript”：“~3.4.3”）和 flex 版本相互不兼容，因此我将 flex 版本更改为最新版本（即"@angular/flex-layout": "^8.0.0-beta.27"） .现在编译和控制台都没有错误，但我的图像仍然没有显示。这是我的html代码。

<div class="container"
    fxLayout="column"
    fxLayoutGap="10px">
    <mat-list fxFlex>
        <mat-list-item *ngFor="let dish of dishes">
            <img matListAvatar src="{{dish.image}}" alt={{dish.name}}>
            <h1 matLine>{{dish.name}</h1>
            <p matLine><span>{{dish.description}}</span></p>
        </mat-list-item>
    </mat-list>
    }
   </div>

【问题讨论】：

标签： angular typescript angular-flex-layout

【解决方案1】：

试试这样：

Working Demo

<div class="container" fxLayout="column" fxLayoutGap="10px">
    <mat-list fxFlex>
        <mat-list-item *ngFor="let dish of dishes">
            <img matListAvatar [src]="dish.image" [attr.alt]="dish.name">
            <h1 matLine>{{dish.name}}</h1>
            <p matLine><span>{{dish.description}}</span></p>
        </mat-list-item>
    </mat-list>
</div>

【讨论】：

您的答案是正确的，因为当您拥有对象数组时，您需要将 src 与 [方] 括号绑定。