我创建了一个简单的 Angular 库,我希望我的库也显示图像。问题是,如果我将图像包含在库的模块文件夹中,然后从模块内部引用它,则会收到 404 错误。据我所知,在 Angular 项目中,图像必须放置在 /assets 文件夹中,但我确实需要将此图像包含在我的库中。
我将图像放置在模块文件夹中并从.html
我的模块组件的文件:<img src="myImage.png">
,但它不起作用。
这里有多种选择,但没有一个是完美的。
图像可以使用 base64 编码为数据 URL 并在内联模板中使用:
<img src="data:image/jpg;base64,...">
或者绑定到包含数据 URL 的组件属性:
<img [src]="imageFoo">
图像可以与包一起包含在内,并且可以指示用户将它们复制到网站公共目录中。由于公共路径事先未知,因此模块可以接受常规的图像路径配置forRoot https://angular.io/guide/ngmodule-faq#what-is-the-forroot-method方法并将其用于图像路径:
@Component({
...
template: `<img src="{{imagesPath}}/foo.jpg">`
})
class SomeComponent {
constructor(@Inject(IMAGES_PATH) public imagesPath: string) {}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)