0

I have an angular library that was created via ng generate library my-lib command.

I need all images to be encoded to base64 in CSS files. The images with relative URL are encoded to base64. But images with absolute paths aren't encoded. For example ng build my-lib transform this file:

projects/my-lib/src/lib/my-lib.component.scss file:

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

into this code:

.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")}

in ng-package.json I have "cssUrl": "inline".

Is it possible to encode images with absolute paths?

IAfanasov
  • 4,775
  • 3
  • 27
  • 42
Ildar
  • 3,808
  • 7
  • 45
  • 81
  • Does this help - https://stackoverflow.com/questions/4184686/how-do-i-set-a-css-url-to-an-absolute-location ? – Mauricio Gracia Gutierrez Jun 24 '21 at 13:48
  • 1
    No. I'd like to use paths with '/' at the start of the URL as they advise. But I need encoded inline images in CSS. Angular for some reason doesn't want to encode images with absolute paths – Ildar Jun 24 '21 at 14:01

0 Answers0