如何使用[src]在Angular 2中动态显示图像？

Question

我正在尝试动态显示图像但不幸的是我没有成功。

这是我目前的HTML代码：

<article class="panel panel-default">
    <div class="panel-body">
        {{ content.file }}
    </div>
    <img [src]="content.file" class="img-thumbnail" alt="Can't Display Image" width="304" height="236">
    <footer class="panel-footer">
        <div class="author">
            {{ content.username }}
        </div>
        <div class="config" *ngIf="belongsToUser()">
            <a (click)="onEdit()">Edit</a>
            <a (click)="onDelete()">Delete</a>
        </div>
    </footer>
</article>

这是我使用[src]=content.file

时得到的结果

但是，我仔细检查了content.file是否具有正确的图像相对路径，我的控制台就是这样。

当我使用：<img src="../../../uploads/file-1491707047047.jpg" class="img-thumbnail" alt="Can't Display Image" width="304" height="236">对链接进行硬编码时，我会显示要显示的图像（我从控制台content.file字段中复制了该图像）。

知道可能导致问题的原因是什么？谢谢！

Answer 1

将值设置为content.file时，可能未更新视图。在哪里设置内容尝试changedetectionref