Angular zeigt HTML-Tags im Browser anstelle von Bild

Question

Zuerst, tut mir leid, wenn es sehr einfache Frage ist, ist mein zweiter Monat lernen JS.

Ich lade ein Bild auf meine Website picture here, um wie ein Avatar Bild für den Benutzer zu zeigen, aber es zeigt nur HTML-Tags nicht das Bild selbst, tatsächlich HTML verweist auf richtigen Link des Bildes in meinem Kopierer Ordner, aber keine zeigen Bild, nur die HTML-Tags ..

Dies sind die Anweisungen um das Bild zu zeigen:

<div class="image_for_edit" *ngIf="user.image && user.image != 'null'"> 
     <img src="{{url + "get-image-user/" + user.image}}" styles="width: 50px;"> 
</div> 

Dann anstelle des Bildes, Browser zeigt dies:

<img src="http://localhost:3977/api/get-image-user/Gja384icVy1nFy1tp6ZvVzEK.jpg" 
styles="width: 50px;"> 

Warum passiert das? Gib keinen Fehler auf mongodb oder Konsole, Datei lädt gut in den richtigen Ordner und scheint alles in Ordnung, habe nur dieses Problem. Und ich kann keinen Fehler finden, den ich den ganzen Tag im Internet gesucht habe, warum kann das mit Angular aber immer noch keine Lösung finden.

Hoffnung jemand kann mir ein wenig helfen, diese zu lösen ..

Answer 1

Sie ng-src für Image-Tags verwenden sollte statt src. Beachten Sie auch, dass Sie innerhalb des Attributs mit doppelten Anführungszeichen einfache Anführungszeichen verwenden sollten.

<div class="image_for_edit" *ngIf="user.image && user.image != 'null'"> 
    <img ng-src="{{url + 'get-image-user/' + user.image}}" styles="width: 50px;"> 
</div> 

Answer 2

In Angular2:

<img [src]="{{url + 'get-image-user/' + user.image}}" styles="width: 50px;" /> 

In Angular1:

<img ng-src="{{url + 'get-image-user/' + user.image}}" styles="width: 50px;" /> 

Answer 3

Sie können so versuchen.

in src-Tag, geben Sie Ihren Ordner Pfad.

<img src="api/get-image-user/{{ user.image }}" alt="" styles="width: 50px;"/>