Wie können Bilder in eine Angular-Bibliothek eingefügt werden?

Question

Ich habe eine einfache Angular-Bibliothek erstellt und möchte, dass meine Bibliothek auch ein Bild anzeigt. Das Problem ist, dass wenn ich das Bild in den Modul-Ordner meiner Bibliothek aufnehmen und dann aus dem Modul darauf verweisen, bekomme ich 404 Fehler. Soweit ich weiß, müssen Bilder in einem Angular-Projekt in den/assets-Ordner gestellt werden, aber ich muss dieses Bild wirklich in meine Bibliothek aufnehmen.

Ich legte das Bild in den Modulordner und verwiesen darauf aus einer Datei .html meiner Modulkomponente: <img src="myImage.png">, aber es funktioniert nicht.

Answer 1

Es gibt hier mehrere Möglichkeiten, von denen keiner perfekt ist.

Ein Bild kann in einer Vorlage inline auf Daten URLs und verwendet, um mit Base64 codiert werden:

<img src="data:image/jpg;base64,..."> 

Oder werden gebunden Komponenteneigenschaft, die Daten URL enthält:

<img [src]="imageFoo"> 

Bilder aufgenommen werden können zusammen mit dem Paket, und ein Benutzer kann angewiesen werden, sie in das öffentliche Verzeichnis der Website zu kopieren. Da die öffentlichen Weg vorher nicht bekannt ist, kann das Modul Bildpfadkonfiguration mit herkömmlichen forRoot Verfahren annehmen und für die Bildpfad verwenden:

@Component({ 
    ... 
    template: `<img src="{{imagesPath}}/foo.jpg">` 
}) 
class SomeComponent { 
    constructor(@Inject(IMAGES_PATH) public imagesPath: string) {} 
} 

Answer 2

Diese Antwort finden Sie hier, um Bilder mit dem Webpack zu bündeln (von denen ich annehme, dass Sie sie verwenden, wie Sie es nicht anders angegeben haben).

Bundle images with webpack

Kurz, der Bildpfad muss der Vorlage Position relativ sein:

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