Angular 4 img src wurde nicht gefunden

Ich habe ein Problem mit der Beschaffung eines Bildes mit Winkel 4. Es sagt mir immer wieder, dass das Bild nicht gefunden wird.

Ordnerstruktur:

app_folder/
app_component/
  - my_componenet
  - image_folder/
      - myimage

Ich benutze das Bild in mycomponent. Wenn in mycomponent, füge ich es direkt ein mit:

<img src="img/myimage.png"

Dies funktioniert gut, aber ich habe das HTML überprüft und es erstellt einen Hash. Meine Bilder müssen jedoch dynamisch zum HTML-Code hinzugefügt werden, da sie Teil einer Liste sind. Also, wenn ich benutze:

<img src="{{imagePath}}">

Das ist im Grunde img/myimage.png, es funktioniert nicht. Wenn ich benutze:

<img [src]="imagePath">

Es heißt NOT FOUND (htttps://localhost/img/myimage.png). Können Sie mir helfen?

AngularJS

<img ng-src="{{imagePath}}">

Winkelig

<img [src]="imagePath">

Kopieren Sie Ihre Bilder in den Assets-Ordner. Angular kann nur über den Assets-Ordner auf statische Dateien wie Bilder und Konfigurationsdateien zugreifen.

Versuchen Sie es wie folgt: <img src="assets/img/myimage.png">

Erstellen Sie einen Bildordner unter dem Assets-Ordner

<img src="assets/images/logo_poster.png">

Winkel 4 bis 8

Entweder funktioniert

<img [src]="imageSrc" [alt]="imageAlt" />

<img src="{{imageSrc}}" alt="{{imageAlt}}" />

und die Komponente wäre

export class sample Component implements OnInit {
   imageSrc = 'assets/images/iphone.png'  
   imageAlt = 'iPhone'

Baumstruktur:

-> src 
   -> app
   -> assets
      -> images
           'iphone.png'

Weisen Sie in Ihrer Komponente eine Variable wie:

export class AppComponent {
  netImage:any = "../assets/network.jpg";
  title = 'app';
}

Verwenden Sie dieses netImage in Ihrem src, um das Bild zu erhalten, wie unten angegeben.

<figure class="figure">
  <img [src]="netImage" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

@Annk Sie können eine Variable in der Datei __component.ts erstellen

myImage: string = " http://example.com/path/image.png ";

In der Datei __. component.html können Sie eine der drei folgenden Methoden verwenden:

1.

<div> <img src="{{myImage}}"> </div>

2.

<div> <img [src]="myImage"/> </div>

3 .

<div> <img bind-src="myImage"/> </div>

Das Problem war, dass der Pfad beim Einfügen srcdurch eine Variable irgendwie nicht erkannt wurde . Ich musste eine Variable wie diese erstellen:

path:any = require("../../img/myImage.png");

und dann kann ich es in verwenden src. Vielen Dank an alle!

Sie müssen standardmäßig die Breite für das Bild angeben

 <img width="300" src="assets/company_logo.png">

Es funktioniert für mich auf allen anderen alternativen Wegen.

<img src="images/no-record-found.png" width="50%" height="50%"/>

Ihr Bilderordner und Ihre index.html sollten sich im selben Verzeichnis befinden (folgen Sie der folgenden Verzeichnisstruktur). es wird sogar nach dem Erstellen funktionieren

Verzeichnisaufbau

-src
    |-images
    |-index.html
    |-app 

Angular kann nur über den Assets-Ordner auf statische Dateien wie Bilder und Konfigurationsdateien zugreifen. Gute Möglichkeit, den String-Pfad eines remote gespeicherten Bildes herunterzuladen und in die Vorlage zu laden.

  public concateInnerHTML(path: string): string {
     if(path){
        let front = "<img class='d-block' src='";
        let back = "' alt='slide'>";
        let result = front + path + back;
        return result;
     }
     return null;
  }

In einer Komponentenimplementierung DoCheck-Schnittstelle und darin Formel für Datenbank einfügen. Die Datenbankabfrage ist nur ein Beispiel.

ngDoCheck(): void {
   this.concatedPathName = this.concateInnerHTML(database.query('src'));
}

Und in HTML Tamplate <div [innerHtml]="concatedPathName"></div>

Eine wichtige Beobachtung zur Funktionsweise von Angular 2, 2+ -Attributbindungen.

Das Problem mit [src]="imagePath"nicht funktioniert, während die folgenden tun:

• <img src="img/myimage.png">
• <img src={{imagePath}}>

Ist Ihre Bindungsdeklaration fällig, [src]="imagePath"ist sie direkt an die Komponente gebunden this.imagePathoder wenn sie Teil einer ngFor-Schleife ist, dann *each.imagePath.

Bei den beiden anderen Arbeitsoptionen binden Sie jedoch entweder eine Zeichenfolge in HTML oder lassen zu, dass HTML an eine Variable gebunden wird, die noch definiert werden muss.

HTML gibt beim Binden keinen Fehler aus <img src=garbage*Th_i$.ngs>, Angular jedoch.

Meine Empfehlung ist es , ein Inline-if zu verwenden , falls die Variable nicht definiert werden kann , wie zum Beispiel <img [src]="!!imagePath ? imagePath : 'urlString'">, die zwar von , wie sein können node.src = imagePath ? imagePath : 'something'.

Vermeiden Sie die Bindung an mögliche fehlende Variablen oder nutzen Sie *ngIfdieses Element gut.

Überprüfen Sie in your.angular-cli.json unter App -> Assets: [], ob Sie den Assets-Ordner hinzugefügt haben.

Oder vielleicht etwas hier: https://github.com/angular/angular-cli/issues/2231 , kann helfen.

Sie müssen diesen Code im Winkel verwenden, um den Bildpfad hinzuzufügen. Wenn sich Ihre Bilder im Assets-Ordner befinden, dann.

<img src="../assets/images/logo.png" id="banner-logo" alt="Landing Page"/>

Wenn nicht im Ordner "Assets", können Sie diesen Code verwenden.

<img src="../images/logo.png" id="banner-logo" alt="Landing Page"/>

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.

Fügen Sie in angle.json hinzu

  "assets": [
              "src/favicon.ico",
              "src/assets"
            ],

Und dann benutze es so: <img src={{imgPath}} alt="img"></div>

Und in ts: storyPath = 'assets/images/myImg.png';

Versuche dies:

<img class="img-responsive" src="assets/img/google-body-ads.png">