wake-up-neo.com

Angular 2 img src in einem relativen Pfad

Der johnpapa Angular 2-Styleguide schlägt einenOrdner-für-Feature-Ansatz vor. Ich habe die Idee, dass Sie kleine eckige Komponenten herstellen können, die wiederverwendet werden können.

Also habe ich eine Komponente erstellt, die ich in einem anderen Projekt wiederverwenden wollte, und in einem eigenen Ordner abgelegt. Ich habe auch ein Bild hinzugefügt, das diese Komponente im selben Ordner anzeigen soll, damit alles in sich geschlossen ist.

<img class="logo" src="logo.png"/>

Aber das versucht dann das Image von root zu ladenlocalhost:3000/logo.png.

Ich nehme an, dies bedeutet, dass ich tatsächlich den genauen Pfad zum Image verwenden muss, aber untergräbt dies nicht die gesamte Idee von Komponenten, die von anderen Personen in anderen Projekten wiederverwendet werden können?

Vorschläge dazu?

Zur Verdeutlichung bearbeiten Ich verwende die Ordnerstruktur aus dem Schnellstart von Angular 2, dh mein Stammordner ist:

app/
node_modules/
index.html
package.json
tsconfig.json

Also, auch wenn ich den Pfad header/logo.png verwende, funktioniert es nicht. Ich muss app/header/logo.png machen. Dies ist praktisch ein absoluter Pfad und funktioniert in der Tat genauso gut, wenn ich einen führenden Schrägstrich hinzufüge: "/app/header/logo.png". Alles, was weniger als der vollständige Pfad ist, unterbricht die Verbindung. Das heißt, wenn jemand dies wiederverwenden möchte, muss er genau dieselbe Ordnerstruktur haben.

Ich schätze, das funktioniert so, ich lerne gerade erst Angular 2, aber ich sollte in der Lage sein, Assets aus einem Komponentenordner zu laden genau wie ich es mit der Vorlage oder tun kann CSS

24
Rob Louie

Ich verwende webpack und konnte dieses Problem überwinden, indem das Bild in der Komponente als Variable und requireing in meiner Vorlage verwendet wurde. 

Dies liegt daran, dass während der Bündelungsphase die Ressource von webpack geladen und die richtige URL gespeichert wird, und der Aufruf von required zur Laufzeit die korrekte URL zur Übergabe an die Vorlage erhält.


Beispiel

Verwenden Sie die folgende Verzeichnisstruktur

app/
    header/
        header.component.ts
        header.component.html
        assets/
            logo.png
...

header.component.ts

...
@Component({
    selector: 'header',
    templateUrl: './header.component.html', // Auto required by webpack
})
export class HeaderComponent {
    private LOGO = require("./assets/logo.png");

    constructor() {};
}

header.component.html

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

Dies bindet zwar die Komponente und die Vorlage, aber die Anforderung muss in der Komponente sein, damit das Webpack es beim Bündeln analysieren und laden kann.


Mit diesem Ansatz habe ich mein Modul mit npm gepackt und installiert und in einem anderen Projekt verwendet - das auch Webpack verwendet.

Ich muss noch mit SystemJS testen.

25
David Blaney

Ich würde dieses Problem lösen, indem ich den SRC-Pfad in zwei Teile aufteilte:

<img class="logo" [src]="(imgPath + imgFileName)" />

in der Komponentendefinition legen Sie Folgendes fest:

@Input() imgPath:string = "app/header/";
imgFileName:string = "logo.png";

Mit dem @Input () - Dekorator kann die imgPath-Variable von außen betrachtet werden. Wenn Sie die Komponente an einen anderen Ort verschieben, können Sie einen anderen Pfad festlegen, wodurch die Komponente wiederverwendbar wird.

2
rekotc

Wenn das Problem ein 404-Fehler ist, müssen Sie Ihren Pfad ändern 

von Pfad/Bild ( Wurzel/Pfad/Bild ,/Pfad/Bild usw.) 

zu ./path/image

Dann sollte es funktionieren, wenn es keine anderen Probleme gibt.

0
serehactka

Verwenden Sie in Ihrem Stammverzeichnis einen Assets-Ordner, der das Logo enthält

0
Mackelito

@ Davids Lösung ist etwas veraltet, da Angular2 jetzt aktualisiert werden kann. Es funktioniert für Anular 2/3. Für angular 4 und höher würde es erfordern, dass kein Fehler gefunden wird. So habe ich es modifiziert.

header.component.ts

...
declare var require: any;

@Component({
    selector: 'header',
    templateUrl: './header.component.html', // Auto required by webpack
})
export class HeaderComponent {
    private LOGO = require("./assets/logo.png");

    constructor() {};
}

header.component.html

<div>
    <img [src]="LOGO" />
</div>
0
ishandutta2007

Sehen Sie sich diese Antwort an: wie man Bilder in angle2 liefert

Der Schlüssel ist entweder das Ablegen in den Ordner "Assets" oder das Bearbeiten der Datei ".angular-cli.json" (Abschnitt "Assets"), um den Ort anzugeben, an dem sich das Bild befindet. Dies gilt auch für andere Ressourcen, die bedient werden sollen, d. H. Stylesheets.

0
Papa Stahl