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

问题描述：

我试图动态显示图像，但不幸的是我一直不成功。如何使用[src]在Angular 2中动态显示图像？

这里是我当前的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字段复制）。

任何想法可能会造成什么问题呢？谢谢！

where is content.file set？它显示，如果你没有'alt'属性.. –

答

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

OP似乎没有任何语法错误 –

http://stackoverflow.com/questions/37965667/whats-equivalent-to-ngsrc-in-angular2。你的html看起来很好。参考这个。 – RemyaJ

哦..你一定是在看文本..根据代码片段中的问题..OP已使用引号..误解我猜 –

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

相关推荐