wake-up-neo.net

Angular 4 Img src funktioniert nicht

ich habe ein Problem mit Bild src in Winkel 4. Es sagt mir ständig, dass das Bild nicht gefunden wird.

ordnerstruktur: Here

Ich verwende das Bild in meiner Komponente. Wenn in meiner Komponente ich direkt einfügen 

<img src="img/myimage.png"

Es funktioniert gut, aber ich habe die HTML-Datei überprüft und es wird ein Hash erstellt. Aber meine Bilder müssen der HTML-Datei eindeutig hinzugefügt werden, da sie Teil einer Liste sind. Also, wenn ich benutze:

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

Was im Grunde "img/myimage.png" ist, funktioniert nicht. Wenn ich benutze 

<img [src]="imagePath">

Es steht NICHT GEFUNDEN (htttps: //localhost/img/myimage.png). Kannst du mir helfen?

37
Annk

AngularJS

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

Winkelig 

<img [src]="imagePath">
48

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

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

37
CharanRoot

Erstellen Sie einen Bildordner unter dem Assets-Ordner

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

weisen Sie in Ihrer Komponente eine Variable zu wie

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

verwenden Sie dieses netImage in Ihrer Quelle, um das Bild wie unten angegeben zu erhalten.

<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>
6
Deepak Jha

@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 dieser drei Methoden verwenden:

1.

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

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

3 . 

<div> <img bind-src="myImage"/> </div>
3
Fakh Ri
<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 funktioniert sogar nach dem Erstellen

Verzeichnisaufbau

-src
    |-images
    |-index.html
    |-app 
2
Kapil Thakkar

Nun, das Problem war, dass der Pfad irgendwie nicht erkannt wurde, als er von einer Variablen in src eingefügt wurde. Ich musste eine Variable wie folgt erstellen:

pfad: any = required ("../../ img/myImage.png");

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

2
Annk

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

Das Problem mit [src]="imagePath" funktioniert nicht, wenn Folgendes ausgeführt wird:

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

Liegt Ihre Bindungsdeklaration vor, ist [src]="imagePath" direkt an Component's this.imagePath gebunden, oder wenn es Teil einer ngFor-Schleife ist, dann *each.imagePath.

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

HTML gibt keinen Fehler aus, wenn Sie <img src=garbage*Th_i$.ngs> binden, wie auch Angular.

Ich empfehle, eine Inline-if zu verwenden, falls die Variable nicht definiert werden könnte wie <img [src]="!!imagePath ? imagePath : 'urlString'">, die jedoch als node.src = imagePath ? imagePath : 'something' bezeichnet werden kann.

Vermeiden Sie die Bindung an möglicherweise fehlende Variablen oder verwenden Sie *ngIf in diesem Element.

Angular kann nur auf statische Dateien wie Bilder und Konfigurationsdateien vom Ordner Assets zugreifen. Gute Möglichkeit, den String-Pfad des gespeicherten Remote-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 Komponente imlement DoCheck-Schnittstelle und in ihr Formel für die Datenbank. Datenbankabfrage ist nur ein Beispiel.

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

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

1
Mises

Versuche dies:

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

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

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

wenn Sie sich nicht im Assets-Ordner befinden, können Sie diesen Code verwenden.

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

Sie müssen die Breite für das Bild als Standard angeben 

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

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

0
ionMobDev

Fügen Sie in angle.json hinzu 

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

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

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

Angular-cli schließt den Assets-Ordner standardmäßig in die Erstellungsoptionen 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.
  • "Mein Bildname.png" sollte "myImageName.png" sein.

Wenn Sie das Bild im Ordner assets/img ablegen, 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, ob Ihre Angular-cli-Konfigurationsdatei vorhanden ist, und stellen Sie sicher, dass Ihr Assets-Ordner in den Build-Optionen hinzugefügt wird.

0
jmuhire

Überprüfen Sie in Ihrem.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.

0
chassis