Angularライブラリに画像を含めるにはどうすればいいですか？

Question

私は簡単なAngularライブラリを作成しました。ライブラリにも画像を表示させたいのです。問題は、自分のライブラリのモジュールフォルダの中に画像を入れてモジュールの中から参照すると、404エラーが出るということです。知っている限り、Angularプロジェクトでは、画像はinside/assetsフォルダ内に配置する必要がありますが、実際にはこの画像をライブラリに含める必要があります。

画像をモジュールフォルダ内に配置し、モジュールモジュールの.htmlファイルから参照していますが、機能しません。

Answer 1

完璧ですどれもここでいくつかのオプションがあります。

画像データのURLにBASE64でエンコードされたテンプレートをインラインで使用することができる。

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

またはデータのURLが含まれているコンポーネントのプロパティにバインドされる：

<img [src]="imageFoo"> 

画像を含めることができますパッケージと共に、ユーザにそれらをウェブサイトのパブリックディレクトリにコピーするよう指示することができる。公共のパスが事前に分かっていないので、モジュールは、従来のforRootの方法で画像のパスの設定を受け入れ、画像パスのためにそれを使用することができます。

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

Answer 2

webpackでイメージをバンドルする場合は、ここでこの回答を参照してください（これは、特に断りのない限り使用しています）。要するに

Bundle images with webpack

、画像パスは、テンプレートの場所からの相対である必要があります：

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