Bild relativer Pfad in angular2

Question

Ich arbeite an einem Angular2 (MEAN Stack) Projekt und ich versuche, ein Bild hinzufügen (aus einer Datenbank abgerufen) auf diese Weise:

<img [src]="'../../../public/img/mountains-thumbnail/' + mountain.image"> 

mountain.image ist eine Variable, die die Daten (das Bild) enthält, die aus der Datenbank abgerufen werden. App funktioniert, aber es gibt mir diesen Fehler in Google Chrome Konsole:

GET http://localhost:3000/public/img/mountains-thumbnail/everest.png 404 (Not Found) 

Wie Sie ich kann erfolgreich das Bild aus der Datenbank abgerufen werden sehen, aber es scheint, dass ich auf dem Bild Pfad einen Fehler haben.

Hier meine Projektstruktur ist (Groß für Ordner ist, ist Klein für Dateien):

-ASSETS 
    - APP 
     - MOUNTAINS 
       mountain.component.js // here I'm trying to include the image 
-BIN 
-MODELS 
-NODE_MODULES 
-PUBLIC 
    - IMG 
     -MOUNTAINS-THUMBNAIL 
      everest.png 
-ROUTES 
-VIEWS 
app.js 
gulpfile.js 
package.json 
tsconfig.json 

Answer 1

dieses

<img [src]="'public/img/mountains-thumbnail/' + mountain.image"> 

ein Versuchen Sie, wenn Ihr Stammordner als verwenden src oder App ist

<img [src]="'src/public/img/mountains-thumbnail/' + mountain.image"> 

statt dieser -

<img [src]="'../../../public/img/mountains-thumbnail/' + mountain.image"> 

nur ../../../

Answer 2

entfernen, wenn Sie @Pardeep Jain Antwort versucht, und nicht mit Ihnen nicht funktioniert. Ich kann nur denken, dass Ihr Server nicht auf den Bildordner zugreifen kann.

überprüfen Sie, ob Ihr Server auf den Bildordner und die Bilddateien zugreifen und sie bereitstellen kann.