Wie lade ich ein Bild (und andere Assets) in Angular eines Projekts?

Ich bin ziemlich neu in Angular, daher bin ich mir nicht sicher, ob dies die beste Vorgehensweise ist.

Ich habe angle-cli verwendet und ng new some-projecteine neue App generiert.

Darin wurde ein "Bilder" -Ordner im "Assets" -Ordner erstellt, also ist jetzt mein Bilderordner src/assets/images

In app.component.html(das ist die Wurzel meiner Anwendung) habe ich gesetzt

<img class="img-responsive" src="assets/images/myimage.png">

Wenn ich ng servemeine Webanwendung anzeigen möchte , wird das Bild nicht angezeigt.

Was ist die beste Vorgehensweise zum Laden von Bildern in einer Angular-Anwendung?

EDIT: Siehe Antwort unten. Mein eigentlicher Bildname verwendete Leerzeichen, die Angular nicht gefiel. Wenn ich die Leerzeichen im Dateinamen entfernt habe, wurde das Bild korrekt angezeigt.

Ich habe es repariert. Mein tatsächlicher Bilddateiname enthielt Leerzeichen, und aus irgendeinem Grund gefiel Angular das nicht. Als ich die Leerzeichen aus meinem Dateinamen entfernte, assets/images/myimage.pngfunktionierte.

In meinem Projekt verwende ich die folgende Syntax in meiner app.component.html:

<img src="/assets/img/1.jpg" alt="image">

oder

<img src='http://mruanova.com/img/1.jpg' alt='image'>

Verwenden Sie [src] als Vorlagenausdruck, wenn Sie eine Eigenschaft mithilfe der Interpolation binden:

<img [src]="imagePath" />

ist das gleiche wie:

<img src={{imagePath}} />

Quelle: Wie binde ich img src in Winkel 2 in ngFor?

Angular-cli schließt den Assets-Ordner standardmäßig in die Build-Optionen ein. Ich habe dieses Problem erhalten, als der Name meiner Bilder Leerzeichen oder Bindestriche enthielt. Zum Beispiel :

• 'my-image-name.png' sollte 'myImageName.png' sein.
• 'my image name.png' sollte 'myImageName.png' sein.

Wenn Sie das Bild in den Ordner assets / img legen, sollte diese Codezeile in Ihren Vorlagen funktionieren:

<img alt="My image name" src="./assets/img/myImageName.png">

Wenn das Problem weiterhin besteht, überprüfen Sie einfach, ob Ihre Angular-cli-Konfigurationsdatei vorhanden ist, und stellen Sie sicher, dass Ihr Assets-Ordner in den Erstellungsoptionen hinzugefügt wurde.

Da es spezifisch für Angular2 bis 5 ist, können wir den Bildpfad mithilfe der unten angegebenen Eigenschaftsbindung binden. Der Bildpfad wird von einfachen Anführungszeichen eingeschlossen.

Beispielbeispiel

<img [src]="'assets/img/klogo.png'" alt="image">

Normalerweise ist "App" das Stammverzeichnis Ihrer Anwendung - haben Sie es versucht app/path/to/assets/img.png?

1. Fügen Sie diese Zeile oben in der Komponente hinzu.

declare var require: any

2. Fügen Sie diese Zeile in Ihre Komponentenklasse ein.

imgname= require("../images/imgname.png");

3. Fügen Sie diesen 'imgname' im img src-Tag auf der HTML-Seite hinzu.

   <img src={{imgname}} alt="">

Für mich war "Ich" das Kapital in "Bilder". was auch eckig-cli nicht gefiel. Daher wird auch zwischen Groß- und Kleinschreibung unterschieden.

Es hängt immer davon ab, wo sich Ihre HTML-Datei befindet, die auf den Pfad der statischen Ressource (in diesem Fall das Bild) verweist.

Beispiel A:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yourpage.html

Wie Sie sehen können, ist yourpage.html einen Ordner vom Stamm entfernt (src-Ordner). Aus diesem Grund benötigt es eine Menge ../ , um zum Stamm zurückzukehren. Dann können Sie vom Stamm zum Bild gehen:

<img class="img-responsive" src="../assests/images/myimage.png">

Beispiel B:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yoursubmodule
      |__yourpage.html

Hier musst du in den Baum um 2 Ordner gehen:

<img class="img-responsive" src="../../assests/images/myimage.png">