如何在 Angular 库中包含图像？答案

【问题标题】：How to include images in an Angular library?如何在 Angular 库中包含图像？
【发布时间】：2018-04-07 13:10:44
【问题描述】：

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

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

【问题讨论】：

显示一些你尝试过的代码。
@SathishKotha 我编辑了帖子

标签： angular

【解决方案1】：

在此处查看此答案以将图像与 webpack 捆绑在一起（我假设您正在使用它，因为您没有另外说明）。

Bundle images with webpack

简而言之，图片路径需要相对于模板位置：

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

【讨论】：

我没有使用 webpack。实际上，我只在要发布的模块中添加了index.ts 和package.json 文件，然后运行了npm publish。
如果你使用的是 AngularCLI，那么它是基于 WebPack 构建的，所以这个原则应该仍然适用。
@GuyPark：这是不正确的。 Angular 库是用 ng-packagr 构建的，而不是 webpack。
真的吗？？构建过程看起来很 WebPack-ish。哈哈……我的错。我确定这些原则非常相似？

【解决方案2】：

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

图像可以使用 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) {}
}

【讨论】：

"这里有几个选项，没有一个是完美的。"这在 2021 年仍然如此吗？大多数 Angular 都非常好，以至于我很惊讶在库组件中包含图像是如此尴尬。如果 Base64 数据 URI 确实仍然是唯一不让消费者采取额外步骤的方法，那么我会这样做，但如果有人知道更新、更简单的方法，请说出来。（顺便说一句，谢谢你的回答。）
@GarySheppard 很久没有重温这个问题了，可能有更方便的选择。我会尝试通过文件加载器动态导入图像 url 的自定义图像组件，如此处所述 webpack.js.org/guides/asset-modules 。不能说这个配置是否适用于 Angular CLI。一些框架会走得更远，做src 转换，但这对于 Angular 来说太简单了。

【解决方案3】：

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

在 scss 中：

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

在html中

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

【讨论】：

【解决方案4】：

如果您不必在多个地方使用该图像，则可以使用 this option（未经我测试）在模板内联中使用编码的 base64 图像，否则您的捆绑包会变得不必要了。

或者您可以将组件中的图像作为变量“加载”，并使用 require("./assets/some-file.png") 在模板中使用它，如this post中所述

注意：由于资产在构建 Angular 库时由 ng-packagr 处理 is not currently supported，请确保在 /dist 中包含资产文件夹，如 this post 中所述

【讨论】：