1

I'm trying to displaying images dynamically but unfortunately I've been unsuccessful.

Here's my current html code:

<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>

Here's what I get when I use [src]=content.file

enter image description here

enter image description here

However, I double checked that content.file has the correct relative path to the image as evident by my console.

enter image description here

When I hardcode the link using: <img src="../../../uploads/file-1491707047047.jpg" class="img-thumbnail" alt="Can't Display Image" width="304" height="236"> instead, I get the image to display (which I literally copied from the console content.file field).

enter image description here enter image description here

Any idea what could be causing the problem? Thanks!

YSA
  • 799
  • 1
  • 12
  • 30

1 Answers1

0

Maybe the view is not updated when you are setting the value to content.file. where you set content try changedetectionref

RemyaJ
  • 5,358
  • 4
  • 22
  • 41
  • http://stackoverflow.com/questions/37965667/whats-equivalent-to-ngsrc-in-angular2 . Your html looks fine to me. Refer this. – RemyaJ Apr 09 '17 at 05:41
  • oh.. you must be looking at the text.. as per the code snippet in the question.. OP has used quotes.. misunderstanding I guess – Suraj Rao Apr 09 '17 at 05:47
  • Oh yea.. my bad..if he has used quotes, then it should work no? I cant find any mistakes in this. – RemyaJ Apr 09 '17 at 05:50