Question

我创建了一个简单的Angular库，我希望我的库也能显示一个图像。问题是，如果我将图像包含在我的库的模块文件夹中，然后从模块内部引用它，我会收到404错误。据我所知，在Angular项目中，图像必须放在/ assets文件夹中，但我真的需要在我的库中包含这个图像。

我将图像放在模块文件夹中，并从我的模块组件的.html文件中引用它：<img src="myImage.png">，但它不起作用。

Answer 1

这里有几个选项，其中没有一个是完美的。

图像可以使用base64编码为数据URL，并在内联模板中使用：

<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">

Answer 3

我正在使用scss样式，下面是我遵循的过程。

在scss中：

.logo {
       background: url("../../../assets/images/sprite/template.png") 0px 15px;
       width: 90px;
}

以html

<div class="navbar-brand dbs-logo"></div>

Answer 4

您可以按照先前答案中的说明，在模板内联中使用已编码的base64图像，如果您不必在多个地方使用图像，请使用this option（未经我测试）捆绑包将变得不必要。

或者，您也可以按照this post

中的说明，使用require（“ ./ assets / some-file.png”）在组件中将图像作为变量“加载”并在模板中使用。

注意：在构建Angular库时，由于ng-packagr使用Assets处理is not currently supported，请确保按照this post

中的说明在/ dist中包括资产文件夹。

如何在Angular库中包含图像？

4 个答案: