时间戳

首页 > 解决方案 > 角度库中 CSS 中的内联图像

angular - 角度库中 CSS 中的内联图像

问题描述

ng generate library my-lib我有一个通过命令创建的角度库。

我需要在 CSS 文件中将所有图像编码为 base64。具有相对 URL 的图像被编码为 base64。但是具有绝对路径的图像不会被编码。例如ng build my-lib转换这个文件：

项目/my-lib/src/lib/my-lib.component.scss 文件：

.class1 {
  background-image: url('/assets/icons/svg/clock.svg');
}
.class2 {
  background-image: url('../assets/icons/svg/clock.svg');
}

进入这段代码：

.class1[_ngcontent-%COMP%]{background-image:url(/assets/icons/svg/clock.svg)}

.class2[_ngcontent-%COMP%]{background-image:url("data:image/svg+xml,%3Csvg width%3D%2223%22 height%3D%2223%22 viewBox%3D%220 0 23 23%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M11.5 20.4055C6.66 20.4055 2.7 16.4455 2.7 11.6055C2.7 6.76547 6.66 2.80547 11.5 2.80547C16.34 2.80547 20.3 6.76547 20.3 11.6055C20.3 16.4455 16.34 20.4055 11.5 20.4055ZM11.5 0.605469C5.45 0.605469 0.5 5.55547 0.5 11.6055C0.5 17.6555 5.45 22.6055 11.5 22.6055C17.55 22.6055 22.5 17.6555 22.5 11.6055C22.5 5.55547 17.55 0.605469 11.5 0.605469ZM10.95 12.4855L16.23 15.5655L17 14.0255L12.6 11.4955V6.10547H10.95V12.4855Z%22 fill%3D%22%2366727F%22%2F%3E%0D%3C%2Fsvg%3E%0D")}

在 ng-package.json 我有"cssUrl": "inline".

是否可以使用绝对路径对图像进行编码？

标签： angularng-packagr

解决方案

推荐阅读